css - 如何在 CSS 中启用缩放设置为 100% 宽度的图像？

Question

如何在 CSS 中将图像设置为 100% 宽度时启用缩放？

这个问题可能听起来很矛盾——如果你将某些内容设置为 100% 宽度

img {
    width: 100%;
    height: auto;
    padding: 0;
    border: 0;
    margin-bottom: 0.66em;

你想要这样，不是吗？

好吧...想象一下:有一个图片库，您希望其宽度为 100%。用户缩放，这只会缩放文本。无论缩放级别如何，图像都将继续为 100%。

我想要的是这种行为:

图像在中性缩放级别下为 100% 宽，但是当用户缩放页面时，图像也会缩放，但是:图像的大小始终调整为窗口的 100%，即使用户调整浏览器大小时(如果是正常缩放)。

是否有针对此问题的纯 CSS 解决方案？

使用 javascript 的可能解决方案 是将图像宽度设置为 javascript 中浏览器窗口的 px。缩放将按预期对图像起作用。当用户调整浏览器大小时，javascript 必须再次更改图像的宽度。

Answer 1

缩放行为取决于浏览器，甚至是可配置的，根据访问者使用的浏览器，该行为要么是您描述的，要么是您想要的!

控制行为的唯一方法是自己实现缩放。 Javascript 是一种方式，但请记住，浏览器缩放 永远不受您的控制。出于可访问性原因，它在那里。您自己的缩放将允许用户以另一种方式放大您决定让您的脚本使用的任何元素。