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

Question

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

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

Answer 1

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

Answer 2

这个问题没有简单的解决方案。您可以像使用其他页面元素一样，对图像使用灵活的单位。但这将导致效率低下和美学问题，包括小图像的文件大小过大(如果您正在缩小它)，放大图像的像素化，等等。因此，您可能希望从大图像开始，并缩小到适当的大小版本，然后使用Javascript根据上下文写出引用正确大小图像的标记。

Answer 3

您可以相对于视口宽度调整图像的大小(例如，img.thing { width: 50%; }，但您通常不想这样做。缩放后的图像(当浏览器进行双三次调整大小时)看起来有点模糊，最坏的情况是完全块状/锯齿状(最近邻调整大小)。你可以加入一些CSS (在Firefox3.6中将支持SVG的image-rendering；在IE中支持-ms-interpolation-mode )，试图说服浏览器使用更好的缩放模式，但它远不可靠，而且最好的呈现效果也不是很好。

此外，CSS background-image​s根本不能调整大小(目前，它建议用于CSS3，但您将需要很长的等待时间)。

Liquid layout通常旨在调整固定大小图像之间的距离，以响应视口宽度的变化，而不是缩放包括图像在内的整个页面。至少在现代浏览器中，用户可以缩放整个页面，包括图像本身，如果他们需要的话，可以降低图像质量。