如何使图像在灵活布局中可调整大小？答案

【问题标题】：How to make images resizable in flexible layout?如何使图像在灵活布局中可调整大小？
【发布时间】：2009-11-07 17:46:29
【问题描述】：

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

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

【问题讨论】：

标签： css

【解决方案1】：

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

【讨论】：

【解决方案2】：

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

【讨论】：

制作多种尺寸会很快加起来（包括所需的整体空间和体重）。我真的认为乔尔的信息是最好的解决方案。它允许您使用单个图像文件（可以缓存所有大小）并继续您的一天。

【解决方案3】：

好吧，您可以相对于视口宽度调整图像大小（例如img.thing { width: 50%; }，但您通常不希望这样做。缩放后的图像充其量（当浏览器进行双三次调整大小时）看起来有点模糊，最坏的情况是完全块状/锯齿状（最近的邻居调整大小）。您可以包含一些 CSS（Firefox 3.6 中的 HTML 将支持 SVG 的 image-rendering；IE 中的 -ms-interpolation-mode）尝试哄骗浏览器使用更好的缩放模式，但它远非可靠，而且最好的渲染仍然不是那么很好。

此外，CSS background-images 根本无法调整大小（然而；它建议用于 CSS3，但您将等待很长时间）。

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

【讨论】：

【解决方案4】：

我认为您将不得不使用 HTML5 中的 canvas 元素。或者您可以使用一些 JavaScript 来设置图像标签的大小，但您必须进行一些数学运算才能确定正确的比例。

【讨论】：

移动设备对 JavaScript 的支持不好，许多浏览器不支持 HTML 5 canvas 标签