响应式 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` 的使用吗?

第九十五节,移动流体布局和响应式布局总结

前端面试题————响应式设计之DIP与srcset/size

如何为响应式图像使用 srcset 和尺寸

scss 响应式图像,srcset,图片标签

Wordpress 将响应式 srcset 标题图像添加到主题