Question

我想要实现的是在网站上垂直堆叠多个图像，以便图像将填满整个屏幕。

我希望如何 1920x1080 1000x1080 洋红色是活动屏幕区域。但是，我似乎只能缩放图像的高度。只有宽度是缩放。我找到的解决方案，打破了宽高比，破坏了所用图像的质量。我宁愿缩放图像，而不是打破纵横比，因此在1000x1080

中进行奇怪的缩放

HTML

<div id="home">
    <div>
        <h1 id="welcomeHeaderOverlay">HermansenDesigns</h1>
        <hr>
        <h3 id="welcomeSubHeaderOverlay">Where code happens</h3>
    </div>
    <img class="img-scale" src="https://picsum.photos/1920/1080/?random" alt="placeholder+image" >
</div>

我有一些堆叠的

CSS

.img-scale {
    background-size: cover !important;
    height:100%;
}

结果图像按适当的宽高比进行缩放，然而，它使其成为全尺寸的1920x1080，而不是活动屏幕区域的100％。并使它有一个水平滚动。

结果是这样的 1905x1080 500x1080

我尝试了各种方法，从带有img-fluid和容器的bootstrap到有关全尺寸背景图像的各种教程。我已经实现了适用于1920x1080 *浏览器的解决方案，然而，它可扩展性很差。

抱歉新手问题。

甚至可以在纯CSS中使用，还是需要一些js或jquery？

Answer 1

这只能通过css来实现，所以不要使用和标记你只需要一个没有src属性的div标签。

然后在CSS中

HTML
<div class="scale-img"></div>
CSS
.scale-img {
      /* Set height to some high amount so you can see your image doing as you want*/
      height: 5000px;
      background-image: url("path/to/your/image1920x1080");          
      /* background-size: 1920px 1080px; */
      /* 
         EDIT: A better approach would be to use contain for responsiveness 
      */
      background-size: contain;
      background-repeat: repeat;

}

Answer 2

也许你正在寻找这样的东西：

＆＃13;

body {
 margin:0;
}
div {
  height:100vh;
  background-size:cover;
  background-position:center center;
}

＆＃13;

<div style="background-image:url('https://picsum.photos/1920/1080/?random')"></div>
<div style="background-image:url('https://picsum.photos/1920/1081/?random')"></div>
<div style="background-image:url('https://picsum.photos/1920/1082/?random')"></div>

＆＃13;

重复多个背景图片

2 个答案: