我正在编写一个简单的英雄区块,其中包含每2秒钟自动更换背景图片。然而,由于这些图片具有不同的尺寸,在较大的屏幕上它们看起来非常挤压。我该如何解决这个问题并使其响应式地适应每个屏幕大小?
$hero: 100vh;
$white: #fff;
$black: #000;
$blue: #6db8d7;
$grey: #808080;
* {
box-sizing: border-box;
}
body {
padding: 0;
margin: 0;
}
.hero-body {
height: 100vh;
width: 100vw;
position: relative;
overflow: hidden;
text-align: center;
}
.hero-text {
position: absolute;
bottom: 40%;
left: 20px;
}
img {
width: 100%;
height: $hero;
}
.title,
h4 {
color: $white;
font-size: 1em;
text-shadow: 1px 1px 2px $black;
text-align: center;
}
button {
background-color: $blue;
padding: 10px;
text-transform: uppercase;
font-weight: 500;
color: $white;
text-align: center;
border: 1px solid transparent;
border-radius: 6px;
box-shadow: 0 3px 6px 0 $grey;
cursor: pointer;
&:hover,
&:focus {
transform: scale(1.05);
transition: all 0.5s ease-in-out;
}
}
<section class="hero">
<div class="hero-body">
<img class="bg-img" src="https://source.unsplash.com/alEZLDPPRBU">
<img class="bg-img" src="https://source.unsplash.com/Ov0u44CyGdM">
<img class="bg-img" src="https://source.unsplash.com/8beTH4VkhLI">
<div class="hero-text">
<h1 class="title">
Delight, Fresh, Fruity
</h1>
<h4>Come join us for our organic cones!</h4>
<button>View flavors</button>
</div>
</div>
</section>
img { width: 100%; height: 100%; object-fit: cover;
(这将类似于background-size: cover;
),但您可能希望使文本静态,并且将图像设置为position: absolute;
。 - chriskirknielsen