Question

我在flex容器中有这两个div。我需要第二个div来保持背景图像宽高比，当调整大小而不裁剪图像时，背景图像需要在整个调整大小时保持100％宽度，同时还包含所有div内容。不确定我需要做什么才能使其正常工作。我有一个小提琴。

<div class="v0">
<div class="v2">
<h2>lorem ipsum</h2>
<ul class="v-list">
  <li>lorem ipsum dolet</li>
  <li>lorem ipsum dolet</li>
  <li>lorem ipsum dolet</li>
  <li>lorem ipsum dolet</li>
</ul>
</div>
<div class="v2">
<div class="v3" style="background-image:url(http://images.all-free-download.com/images/graphicthumb/winter_sunrise_in_the_mountains_312220.jpg);">
  <div class="v4">
    <h3>Lorem ipsum dolet</h3>
    <p>
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Recusandae officia neque, rem placeat. Alias voluptas, tempore vitae ad incidunt. Amet dolor voluptates iure, corrupti esse perferendis dolores dolorem, sunt necessitatibus.
    </p>
    <a class="b1">lorem button</a>
  </div>
</div>
</div>
</div>


.v0 {
 display: flex;
 flex-wrap: nowrap;
 justify-content: space-between;
 padding: 2em;
}

.v-list {
 display: flex;
 flex-wrap: wrap;
}

.v-list li {
 flex-basis: 100%;
 margin-bottom: 1em;
}

.v2 {
 flex-basis: 50%;
 z-index: 1;
}

.v3 {
 background-repeat: no-repeat;
 background-position: center bottom;
 background-size: cover;
 min-height: 515px;
 min-width: 50vw;
}

.v4 {
 padding: 1em;
}

Answer 1

通过使用位于文本后面的img，我们可以更轻松地解决这个问题。

在这里，我从图像中切下部分顶部蓝色，给出相同蓝色的背景，然后文本将始终位于山之上

Fiddle demo

Stack snippet

＆＃13;

.v0 {
  display: flex;
  flex-wrap: nowrap;
  justify-content: space-between;
  padding: 2em;
}
.v-list {
  display: flex;
  flex-wrap: wrap;
}
.v-list li {
flex-basis: 100%;
 margin-bottom: 1em;
}
.v2 {
  flex-basis: 50%;
  z-index: 1;
}
.v3 {
  background-repeat: no-repeat;
  background-position: center bottom;
  background-size: contain;
  background-color: #80C2FE;
  width: 50vw;
}
.v4 p, .v4 h3, .v4 a {
  padding: 1em 1em 0;
}
.v4 img {
  width: 100%;
}

＆＃13;

  <div class="v0">
    <div class="v2">
    <h2>lorem ipsum</h2>
    <ul class="v-list">
      <li>lorem ipsum dolet</li>
      <li>lorem ipsum dolet</li>
      <li>lorem ipsum dolet</li>
      <li>lorem ipsum dolet</li>
    </ul>
    </div>
    <div class="v2">
    <div class="v3">
    <div class="v4">
      <h3>Lorem ipsum dolet</h3>
      <p>
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Recusandae officia neque, rem placeat. Alias voluptas, tempore vitae ad incidunt. Amet dolor voluptates iure, corrupti esse perferendis dolores dolorem, sunt necessitatibus.
      </p>
      <a class="b1">lorem button</a>
      <img src="https://i.stack.imgur.com/YmWjI.png" alt="">
    </div>
    </div>
    </div>
  </div>

＆＃13;

保持100％的宽度和背景粘在flex div的底部

1 个答案: