如何在CSS设置图像为100%宽度时启用缩放?
这个问题可能听起来自相矛盾 - 如果您将某些东西设置为100%宽度
这个问题可能听起来自相矛盾 - 如果您将某些东西设置为100%宽度
img {
width: 100%;
height: auto;
padding: 0;
border: 0;
margin-bottom: 0.66em;
你想要这样,是吗?
好吧…试想一下:有一组图片,你希望它们的宽度为100%。用户缩放页面,但只会缩放文本。无论缩放级别如何,图片仍将保持为100%。
我想要的行为是:
在中性缩放级别下,图像的宽度为100%,但当用户缩放页面时,图像也会随之放大或缩小:即使用户调整浏览器大小(如果处于普通缩放模式),图像也会被重新调整为始终占据窗口的100%。
是否有 CSS-only 的解决方案?
使用 JavaScript 可能的解决方案 是在 JavaScript 中将图像宽度设置为浏览器窗口的 px 值。图像会按预期方式缩放。当用户调整浏览器大小时,JavaScript 必须再次更改图像的宽度。