Question

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

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

我尝试使用高度100％宽度自动，它可以工作，但图像拉伸。我很好奇是否有办法减少拉伸（或没有任何一起）。我对正在裁剪的图像感到满意但是如果可能的话我希望它保持不变。

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

思想？

Answer 1

使用＆＃34;封面＆＃34;将其设置为背景图像。和＆＃34; vh＆＃34;在你的CSS中。如果您有幻灯片的图像，请删除图像标记，然后将幻灯片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>

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

Answer 2

百分比的高度与父母相关，在树上。

还需要设置

SpeechDetected

CSS：图像响应全高无拉伸

2 个答案: