响应式 img srcset 不在横向模式下缩放
Posted
技术标签:
【中文标题】响应式 img srcset 不在横向模式下缩放【英文标题】:Responsive img srcset not scaling in landscape mode 【发布时间】:2017-03-11 16:28:27 【问题描述】:我最近构建了以下website。该网站在所有图片上都使用了 img srcset。
在调试过程中,我发现在主页上切换纵向和横向模式时,顶部全宽图像没有像应有的那样填满视口。如果您在横向模式下刷新页面,您将看到正确的缩放比例。
我正在使用以下 CSS 来使我的图像具有响应性:
img
height: auto;
max-width: 100%;
请务必注意,我为此准备了两张图片。当视口为 600 像素或更少时,将显示方形图像。任何超过 600 像素和全宽图像都会显示。这在 css 中通过 display: block;
和 display: none;
进行控制。
我无法通过 Browserstack 模拟该问题,但可以在 Safari 和 Chrome 中的物理设备 (iPhone 6) 上模拟。
如果我的 img 标签声明了宽度和高度会有帮助吗?
【问题讨论】:
【参考方案1】:你为什么不用min-width
?
问题始于您没有定义元素的宽度,而是定义了它的max-width
。在这种情况下,您的图像基于原始它们的宽度。
要弄清楚,只需添加min-width: 100%;
img
height: auto;
min-width: 100%;
max-width: 100%;
【讨论】:
以上是关于响应式 img srcset 不在横向模式下缩放的主要内容,如果未能解决你的问题,请参考以下文章
我可以让 <img> `srcset`/`sizes` 属性考虑到我对 `object-fit: cover` 的使用吗?