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

Question

即使在 CSS 中将图像设置为 100% 宽度，如何启用放大图像？

这个问题可能听起来自相矛盾——如果你将某些东西设置为 100% 宽度

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

你想要那样，不是吗？

好吧...图这个：有一个你想要100%宽的图像库。用户缩放，这只会缩放文本。无论缩放级别如何，图像都将继续为 100%。

我想要的是这种行为：

图像在中性缩放级别为 100% 宽，但是当用户缩放页面时，图像也会缩放，但是：即使用户调整浏览器大小（如果在正常飞涨）。

是否只有 CSS 解决方案？

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

Answer 1

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

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