CSS：图像响应全高无拉伸

我一直在练习制作一些网页。长话短说，他从365psd.com下载了一个psd，并一直在尝试重新设计它的设计，例如，只是搞乱了它的主题

我有一个旋转木马，我使用CSS动画创建了三个图像。旋转木马本身工作良好，全尺寸看起来也不错。虽然当我将浏览器缩小到较小的尺寸时，图像不会拉伸其高度以填充整个区域，因此在导航之前，它会在图像下方留下一个较大的黑色区域

我试过使用“高度100%宽度自动”功能，但图像会拉伸。我很好奇，是否有一种方法可以最大限度地减少拉伸，或者不进行任何拉伸。我同意图像被裁剪，但如果可能的话，我希望它不被拉伸

Github页面： Github CSS：

---

想法？

在CSS中使用封面和vh将其设置为背景图像。如果您有幻灯片的图像，请删除图像标记，只需将幻灯片div作为每个幻灯片和每个幻灯片副本背景的容器即可

.slide { 
   width:100vw;
   height:100vh;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

.slide__1{
     background: url(images/bg.jpg) no-repeat center center; 
    }
.slide__2{
         background: url(images/bg2.jpg) no-repeat center center; 
    }
.slide__3{
         background: url(images/bg3.jpg) no-repeat center center; 
    }

.slides{
    height:100vh;
    width:100vw;
}

<div class="slides">
    <div class="slide slide__1"><p>Some text</p></div>
    <div class="slide slide__2"><p>Some text</p></div>
    <div class="slide slide__3"><p>Some text</p></div>
</div>

---

它将自动缩放和裁剪，以始终填充整个视口。

高度（以百分比为单位）相对于父视图（向上）起作用

还需要设置

.slides {height:100%;}

---

为了澄清，单位vh是当前视图高度的百分之一。然后我会使用JS来保持旋转木马运行吗？是的。只需在脚本中以幻灯片div而不是图像标记为目标。感谢所有回复！我花了一点时间才弄明白如何使用我的旧代码进行返工，但我还是设法弄明白了，它似乎工作得很好！再次感谢！快速提问如果可以的话，对于较大的屏幕尺寸，推荐的解决方案是什么？在上面的设置中，图像停止以1600px的图像大小扩散，这很好，但是我应该将其背景色设置为黑色吗？导航栏颜色？我只是想知道推荐的解决方案是什么。