如何在灵活的布局中调整图像大小？

Question

如果我们制作流体布局，我们可以使用em或％作为字体和div宽度和高度来制作流畅但如何使图像可调整大小？

我想为所有尺寸和设备制作一个布局

Answer 1

Joel Spolsky设法找到一个非常简单的解决方案（IE的一个小的专有CSS定义）。他找到了解决方案here。

Answer 2

对此没有简单的解决方案。您可以像使用其他页面元素一样为图像使用灵活单位。但是这会导致效率低下和美学问题，包括微小图像的文件大小过大（如果你要缩小尺寸），大小图像的像素化等等。所以你可能想要的是从一个大的图像开始到适当大小的版本，并根据上下文使用Javascript写出引用正确大小图像的标记。

Answer 3

你可以相对于视口宽度（例如。img.thing { width: 50%; } 大小的图像，但你通常不想这样。缩放图像最多（当浏览器进行双重调整大小时） ）看起来有点模糊，最糟糕的是完全阻塞/锯齿状（最近邻居调整大小）。你可以包含一些CSS（Firefox 3.6中支持SVG image-rendering; IE中支持-ms-interpolation-mode）哄骗浏览器使用更好的缩放模式，但它远非可靠，但最佳渲染仍然不是 。

此外，CSS background-image根本无法调整大小（但是，它建议用于CSS3，但是你需要等待很长时间）。

液体布局通常旨在调整固定大小图像之间的距离以响应视口宽度的变化，而不是缩放整个页面（包括图像）。用户至少可以在现代浏览器中缩放整个页面，包括图像本身，如果需要，可以获得图像质量。

Answer 4

我估计你必须使用HTML5中的canvas元素。或者您可以使用一些JavaScript设置图像标记的大小，但您必须进行一些数学计算以确定正确的比例。