x1c 0d1x当我在一个有背景图像的容器上增加左边/右边的边距时,图像开始奇怪地暴露出来。它移到右边,不再居中。
<section class="section--1">
<div>
<div class="photo--container">
<h1 class="logo">Ableton</h1>
</div>
</div>
<div class="text--container">
<p class="text--main__1">
...
</p>
<p class="text--main__2">
...
</p>
</div>
</section>
下面是CSS:
body {
margin: auto;
max-width: 98rem;
height: 500rem;
.section--1 {
max-width: 100%;
}
.section--1 div:first-child {
margin: -12rem 8% 0 8%;
}
.photo--container {
background: url("images/header.avif") center/cover;
width: 100%;
height: 40rem;
box-sizing: border-box;
display: flex;
justify-content: center;
align-items: center;
}
1条答案
按热度按时间46scxncf1#
将
object-fit:cover
或object-fit:stretch
属性应用于图像样式