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

Question

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

为了实现这一点，我使用了picture元素在给定的断点处添加图像的裁剪版本。我还将包装器的width属性设置为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似乎忽略了图像应该溢出容器(除非我错过了什么)，在这里，stackoverflows的编辑器(上图)的结果面板似乎太小，无法演示问题

谁知道我哪里可能出错了?

Answer 1

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

希望这对遇到同样问题的人有所帮助