Html 如何防止图像被压扁？

我正在编写一个简单的英雄部分，每2秒自动更改背景中的图像。然而，由于图像具有不同的尺寸，它们在更大的屏幕上看起来确实被压扁了。我如何解决这个问题，使其响应迅速，适合各种屏幕尺寸

$hero:100vh；
$white:#fff；
$black:000；
$blue:#6db8d7；
$grey:#808080；
* {
框大小：边框框；
}
身体{
填充：0；
保证金：0；
}
.英雄身体{
高度：100vh；
宽度：100vw；
位置：相对位置；
溢出：隐藏；
文本对齐：居中；
}
.英雄文本{
位置：绝对位置；
底部：40%；
左：20px；
}
img{
宽度：100%；
身高：$英雄；
}
标题
h4{
颜色：$白色；
字号：1em；
文本阴影：1px 1px 2px$黑色；
文本对齐：居中；
}
钮扣{
背景颜色：$蓝色；
填充：10px；
文本转换：大写；
字号：500；
颜色：$白色；
文本对齐：居中；
边框：1px实心透明；
边界半径：6px；
盒影：0 3px 6px 0$灰色；
光标：指针；
&：悬停，
&：焦点{
转换：标度（1.05）；
过渡：所有0.5s缓进缓出；
}
}

令人愉快的、新鲜的、有水果味的
来加入我们的有机蛋筒吧！
查看口味

设置

对象适合度：覆盖
至

令人愉快的、新鲜的、有水果味的
来加入我们的有机蛋筒吧！
查看口味
我建议将“高度”设置为“自动”，其中“宽度”为100%，以保持图像的比例。您可以为移动设备添加媒体查询，以将宽度设置为50%（取决于设备的大小-由您决定），并将高度设置为自动。
您还可以使用新标记来适应各种屏幕大小

图片标签使用示例：

<picture>
  <source media="(min-width: 650px)" srcset="img_pink_flowers.jpg">
  <source media="(min-width: 465px)" srcset="img_white_flower.jpg">
  <img src="img_orange_flowers.jpg" alt="Flowers" style="width:auto;">
</picture>



希望这有帮助
如果只针对现代浏览器，您可以覆盖容器：
img{宽度：100%；高度：100%；对象适合度：cover；
（其工作方式与
背景大小：cover；
），但您可能希望将文本设置为静态，而不是将图像设置为
位置：绝对；
。谢谢！这非常有效。@chriskirknielsenow它像一个符咒一样工作。我以前从未听说过这一点。谢谢！@ChuChu，很乐意提供帮助。对于不同的屏幕大小，使用不同的图片似乎是最好的解决方案。是的，解决方案是图片标签可以满足这一点。同样重要的是要记住优化图像的好处。（这不是问题的一部分，但值得注意的是，我认为…）