CSS：图像响应全高无拉伸

Question

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

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

我试过使用 Height 100% width auto 确实有效，但图像会拉伸。我很好奇是否有一种方法可以最大限度地减少拉伸（或者完全没有）。我对裁剪的图像没意见，但如果可能的话，我希望它保持未拉伸。

Github 页面：https://tsukiyonocm.github.io/Portfolio-Photography-Website/
Github CSS：https://github.com/Tsukiyonocm/Portfolio-Photography-Website/blob/master/css/style.css

想法？

Answer 1

以百分比表示的高度相对于父级起作用，沿树向上。

也需要设置

.slides {height:100%;}

Answer 2

在您的 CSS 中使用“cover”和“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>

它会自动缩放和裁剪以始终填满整个视口。