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

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>

这是我正在使用的代码。

我知道“-fluid”标签会使图像填满屏幕的宽度，图像的高度将被设置为保持纵横比，但我只想填满整个图像屏幕。

这可能很简单，但我找不到答案，我正在努力寻找在线解决方案，因此 post 在这里。如果有人能够伸出援手，我们将不胜感激。

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 Whosebug 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" />

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

How can I scale an image to exact viewport size?

html

css

bootstrap-5