Html 如何正确地调整图像的大小？切换到移动视图时的图像裁剪

我的网站上的主横幅图像有问题

可以使用右键单击inspect元素，然后选中“切换设备工具栏”或使用ctrl+shift+m

正如您将看到的，主图像在移动模式下自动裁剪，而不是调整大小：

代码为html：

<div class="block-slideshow__slide-image block-slideshow__slide-image--desktop image" style="background-image: url('images/slides/slide-1-full.jpg')"></div>
                                        <div class="block-slideshow__slide-image block-slideshow__slide-image--mobile image" style="background-image: url('images/slides/slide-1-mobile.jpg')"></div>

我需要的是图像的延伸，而不是裁剪，因为我是一个新手，我不知道如何

尝试了这种方法：

但不工作，我不知道该怎么办

感谢您在福沃德

HTML

<img src="'images/slides/slide-1-full.jpg">

也许这就是你要找的

我建议您在6:10观看此节目，breezer提供的解决方案：

背景尺寸：包含

---

谢谢

背景尺寸：包含

正如@Breezer所说，您可以使用

背景大小：contain但您应该调整
块幻灯片放映\uuu幻灯片
高度
<img src="'images/slides/slide-1-full.jpg">

img{ aspect-ratio: 16/9 }