Question

我们使用下面的代码将图像设置为背景图像，并将文本放在其上。有没有办法将图像显示为背景而没有＆＃34;裁剪＆＃34;无论图像顶部的内容高度如何？

出现的模式是随着内容的增长，图像的高度也会增加。如果解决方案要求我们摆脱它，那么我就可以了。

注意：图像的大小不一定相同。

目前的结果

期望的结果

＆＃13;

.banner {
  position: relative;
  display: block;
}

.banner:after {
  content: '';
  width: 100%;
  height: 100%;
  position: absolute;
  bottom: 0;
  left: 0;
}

.banner__image {
  width: 100%;
  height: 100%;
  background-position: center;
  background-size: cover;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
}

.banner__content {
  padding: 200px;
  position: relative;
  max-width: 900px;
  text-shadow: 0 0 20px rgba(0,0,0,.6);
  margin: 0 auto;
  padding: 0 15px;
  z-index: 2;
  color: white;
}

＆＃13;

<div class="banner">
  <div class="banner__image" style="background-image: url('https://media.istockphoto.com/vectors/people-large-group-vector-id519533182')"></div>
  <div class="banner__content">
    <h1>Compellingly seize high-payoff supply chains</h1>
    <h2>Compellingly underwhelm extensive technology rather than low-risk high-yield manufactured products. Phosfluorescently brand just in.</h2>
  </div>
</div>

＆＃13;

Answer 1

通过使用padding-bottom值中的百分比值，百分比是根据元素的width计算出来的，而不是像height那样计算的。

这意味着

padding-bottom: 42.773%; /* (438 × 100 / 1024) */

...总是会有一个最小高度，允许它显示未剪切的图像（在您的情况下为1024px×438px）。

.min-ratio {
  padding-bottom: 42.7%;  /* (height × 100 / width) */
  background-size: contain;
  background-position: bottom center;
  background-repeat: no-repeat;
  width: 100%;
  position: relative;
}

.banner__content {
  position: absolute;
  background-color: #00000065;
  color: white;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  padding: 0 3rem;
}

@media(max-width: 600px) {
  .banner__content {
    position: static;
  }
  .min-ratio {
    background-size: cover;
    padding-bottom: 0;
  }
}

.banner__content>* {
  align-self: stretch;
}

<div class="min-ratio" style="background-image: url(https://media.istockphoto.com/vectors/people-large-group-vector-id519533182)">
  <div class="banner__content">
    <h1>Compellingly seize high-payoff supply chains</h1>
    <h2>Compellingly underwhelm extensive technology rather than low-risk high-yield manufactured products. Phosfluorescently brand just in.</h2>
  </div>
</div>

但是，您需要使用background-repeat:no-repeat停止图像垂直重复，以便当div太高时（例如在移动设备上），它不会重复图像。

上述技术允许您为元素设置最小比率，而无需在不同width响应时间间隔内对height或@media值进行硬编码。

由于堆栈片段向下看，这里是小提琴：https://jsfiddle.net/websiter/mek0chne/4/

Answer 2

您可以在.banner中使用填充

.banner {
  position: relative;
  display: block;
  padding : 50px 0;
}

Answer 3

如果您不知道图像的高度是什么，可以使用图像而不是带背景的div并将其位置设置为绝对值，这样做的一种方法是：{ {3}}

＆＃13;

.banner {
  position: relative;
  display: block;
}

.banner:after {
  content: '';
  width: 100%;
  height: 100%;
  position: absolute;
  bottom: 0;
  left: 0;
}

.banner__image {
  width: 100%;
  height: 100%;
  background-position: center;
  background-size: cover;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
}

.banner__content {
  padding: 200px;
  position: relative;
  max-width: 900px;
  text-shadow: 0 0 20px rgba(0,0,0,.6);
  margin: 0 auto;
  padding: 0 15px;
  z-index: 2;
  color: white;
}

#bg{
  position: absolute;
  width: 100%;
}

＆＃13;

<div class="banner">
  <!--
  <div class="banner__image" style="background-image: url('https://media.istockphoto.com/vectors/people-large-group-vector-id519533182')"></div>
  -->
  <img src="https://media.istockphoto.com/vectors/people-large-group-vector-id519533182" id="bg"/>
  <div class="banner__content">
    <h1>Compellingly seize high-payoff supply chains</h1>
    <h2>Compellingly underwhelm extensive technology rather than low-risk high-yield manufactured products. Phosfluorescently brand just in.</h2>
  </div>
</div>

＆＃13;

Answer 4

然后不要将图像用作背景图像。将其用作普通图像。

<div class="banner__image">
    <img src="url of the image">
</div>
<div class="banner__content">
    <!-- Your content here -->
</div>

对于CSS

.banner__image img{
    position:absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    z-index: 2;
}
.banner__image{
    position: absolute;
    z-index: 1;
    height: 100%;
    width: 100%;
}
.banner__content{
    z-index: 3;
}

现在这应该可行

Answer 5

您应该查看您班级的css中的最大和最小高度属性：

.banner

此外，您还可以查看background-repeat css属性，以防止图像重复，或者在两个或仅在x或y轴上重复。

如果您愿意，我可以提供一些代码，但这些代码非常自我解释，可能会有更优雅的解决方案，但这可以帮助您实现所需的目标。

重复： https://www.w3schools.com/cssref/pr_background-repeat.asp

高度： https://www.w3schools.com/cssref/pr_dim_min-height.asp https://www.w3schools.com/cssref/pr_dim_max-height.asp

如何使背景图像占据全宽而不裁剪？

5 个答案: