【发布时间】：2022-07-18 23:16:46
【问题描述】：
在我的代码中，我有 2 张图片：第一张适用于除手机以外的所有设备，第二张适用于手机。一切正常，但在 Firefox 中却不行：Firefox 总是选择第二个。
<picture class="page__hero">
<source srcset="https://via.placeholder.com/300/ff0000"
media="(min-width: 769px)" width="718" height="180">
<img src="https://via.placeholder.com/300"
width="269" height="67" alt="Good alt text">
</picture>我尝试不在<source> 和<img> 元素中设置width 和height，然后它按预期工作。但据我所知，我们应该设置这两个属性以防止布局变化。
我做错了什么？
那我应该如何控制width和height呢？在 CSS 中？
【问题讨论】：
-
我在 Firefox 中测试了上面创建的 sn-p。它为大屏幕显示红色图像。
-
谢谢！我试过你的sn-p，我在Firefox中看到红色方块，但大小不正确，宽度取自
<img>。我试图改变视口的宽度，颜色改变但宽度不变，宽度保持不变。