如何将图像缩放到精确的视口大小

Question

我是Bootstrap和CSS的新手，我正在努力为我的网站制作一个主屏幕。我想确保图像(内部大小1920x1080(完全适合视口。目前，图像的一部分在屏幕外渲染，你必须向下滚动才能查看其余部分。这不是我想要的。

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<div class="container-fluid" id="home">
<img src="https://via.placeholder.com/1920x1080" class="img-fluid" alt="homeImg" id="homeImg">
</div>

这是我正在使用的代码。

我理解-流体"；标签将使图像填充屏幕的宽度，并且图像的高度将被设置为保持纵横比，但我只希望整个图像填充屏幕。

这可能很简单，但我无法找到答案，我很难在网上找到解决方案，因此我在这里发帖。如果人们能够伸出援手，我们将不胜感激。

Answer 1

您可以使用height, background-size, background-position的组合来实现类似的行为。

示例(全屏视图(

.image-container {
height: 100vh;
background-image: url('https://dummyimage.com/1920x1080/000/fff.jpg');
background-size: cover;
background-position: center;
}

/* for stackoverflow container */
body {
margin: 0;
}

<div class="image-container"></div>

如果拉伸很好，试试这个

.my-image {
width: 100vw;
height: 100vh;
}
body {
margin: 0;
}

<img class="my-image" src="https://dummyimage.com/1920x1080/000/fff.jpg" />