<picture> 元素在媒体查询/属性之间闪烁到 100% 宽度答案

【问题标题】：<picture> element flickering to 100% width between media queries/attributes<picture> 元素在媒体查询/属性之间闪烁到 100% 宽度
【发布时间】：2021-11-02 01:14:55
【问题描述】：

所以我有一个绝对定位的英雄图像，当浏览器变小时，我允许它溢出它的容器（出于视差原因，我想保持它的高度）。

我已经使用图片元素在给定断点处添加图像的裁剪版本以实现此目的。我还将包装器的宽度属性设置为 100%；

.wrapper {
  position: relative;
  height: 100vh;
  width: 100%;
  overflow: hidden;
}

.image {
  position: absolute;
  top: 0;
  left: 0;
  content: "";
}

<div class="wrapper">
  <picture>
    <source media="(max-width: 1200px)" srcset="https://i.imgur.com/Be8mwYF.jpg 1200w" width="1200">
    <source media="(max-width: 1500px)" srcset="https://i.imgur.com/uyRlf1V.jpg 1500w" width="1500">
    <source srcset="https://i.imgur.com/jZkIwzu.jpg 1903w" width="1903">

    <img src="https://i.imgur.com/jZkIwzu.jpg" alt="" class="image">
  </picture>


</div>

这正如我所料，除了我减小浏览器大小并且它到达媒体断点时，图像非常短暂地闪烁并且表现得好像width 再次设置为 100%；反之亦然 - 当浏览器变大时，图像会在断点处瞬间放大。

这种行为只发生在一瞬间，而且似乎不可能让它保持在那个大小。我对元素几乎没有样式，所以我认为这不是问题。

我试图创建一个代码示例，但 codepen 似乎忽略了图像应该溢出容器（除非我遗漏了什么），here，并且 stackoverflows 编辑器的结果面板（上图）似乎太小，无法证明问题

有人知道我可能会出错的地方吗？

【问题讨论】：

标签： html css responsive-design

【解决方案1】：

所以答案似乎是将图像的宽度设置为auto。但我仍然不知道为什么它在断点之间表现得这样：耸耸肩：

如果遇到同样的事情，希望这对其他人有所帮助

【讨论】：