css - 保持 100% 宽度和背景贴在 flex div 的底部

Question

我将这两个 div 放在一个 flex 容器中。我需要第二个 div 在不裁剪图像的情况下调整大小时保持背景图像的纵横比，背景图像需要在整个调整大小时保持 100% 宽度，同时还包含所有 div 内容。不确定我需要做什么才能正常工作。我已经包含了一个 fiddle 。

JSFiddle example

<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

堆栈片段

.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%;
}

  <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="/image/YmWjI.png" alt="">
    </div>
    </div>
    </div>
  </div>