CSS图像缩放到填充？

2022-08-26 00:00:00 reactjs html css bootstrap-5 react-bootstrap

我有一个网站，上面有完整的视窗图片，如

背景图像占据了导航栏下的整个容器。

我想让它在移动设备上，当我查看图像时，它会被放大/居中，这样图像就不会扭曲，而且我仍然可以看到其中的一些作为背景...我可能没有正确地解释它，我对设计不是很流利，但我认为这个样机不言而喻

红色表示原始图像边界，蓝色表示移动视区。我希望图像在移动设备上被裁剪/缩放。如何使用css来实现这一点？谢谢

编辑：为了澄清我尝试过的内容，我不相信我可以使用background-size: cover和background-position: center。我目前的设置是使用Reaction Bootstrap Carousel。Carousel组件采用<img>属性，因此我正在尝试修改图像的样式。根据我所阅读的内容，Backback-Size/Position属性仅适用于<html>标记的样式，根据我尝试此建议的经验，它不起作用。

例如，在我的homepage.scss中，我有以下

.fullImage {
    background-position: center;
    background-size: cover;
}

并将其应用于旋转木马中的图像

<Carousel.Item interval={5000}>
  <img
    className="fullImage"
    src="/images/home/banner/img1.jpg"
  />
</Carousel.Item>

只有在Mobile上的效果看起来像这样：

其中预期效果应该类似于中间图像，其中图像实际上不能滚动到视区之外，而是具有固定大小，并在较小屏幕上放大了视图。

解决方案

如果您确实需要保留img元素(没有背景图像)，我会选择object-fit: cover。此解决方案仅适用于modern browsers。

数据-lang="js"数据-隐藏="假"数据-控制台="真"数据-巴贝尔="假">

* { margin: 0; } /* just some reset */
.header { height: 100vh; width: 100vw; overflow: hidden; }
img { width: 100%; height: 100%; object-fit: cover; }

<div class="header">
  <img src="https://picsum.photos/1920/1080"/>
</div>

但是，理想情况下，我会选择src-sets，并将移动设备的图像替换为裁剪后的图像，这样它就不会加载不必要的大容量。

相关文章