html - 如何使背景图像缩放到平行 div 的高度？

Question

我有一个包含两个 div 的 div。左边是背景图片，右边是包含文本的 div。

如果我在左侧的 div 中只有一个图像，我可以使用 display: flex; 创建我想要的设置，其中背景图像 div 缩放为旁边的 div 的高度( see this jsFiddle ).

但是我实际上需要在左侧 div 中放映幻灯片，这意味着我必须在外部 div 中嵌套多个 div 和图像，因此背景图像不再位于宽度设置为 ( see this jsFiddle ) 的 div 上，这意味着它没有按预期缩放。

我想不出解决这个问题的方法，任何人都可以提供任何建议吗？

.product-single__photos,
.bkgd-text {
  width: 50%;
}

.bkgd-img__container {
  display: flex;
  flex-flow: row wrap;
}

.bkgd-img__container .bkgd-image {
  display: block;
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  position: relative;
  overflow: hidden;
}

.bkgd-img__container .bkgd-image:before {
  display: block;
  width: 100%;
  padding-top: 100%;
  content: "";
}

.bkgd-img__container .bkgd-text {
  display: flex;
  flex-direction: column;
  align-items: left;
  justify-content: center;
}

<div class="bkgd-img__container">
  <div class="product-single__photos ">
    <div class="product-single__photo-wrapper js">
      <div class="product-single__photo" data-image-id="image-id">
        <div id="image-id" class="feature-row__image lazyload bkgd-image" style="background-image: url('https://images.unsplash.com/photo-1506744038136-46273834b3fb?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjF9&dpr=2&auto=format&fit=crop&w=416&h=312&q=60');" tabindex="-1"></div>
      </div>
    </div>
  </div>

  <div class="product-single__info bkgd-text">
    <div class="product-single__meta">
      Product text goes here.Lorem ipsum dolor sit amet, posse audire ne mel. Movet moderatius per te. Ut dictas appetere referrentur mel. Esse efficiantur at eum. Ius debitis habemus no, cum hinc feugait fierent in. Erant consectetuer at ius, id platonem inciderint
      efficiantur pro, utamur iudicabit cu cum. Eos ne labitur offendit omittantur, te vim diceret consequuntur signiferumque. Sea ut oratio exerci aeterno, per nibh ornatus in, vim falli animal delicatissimi cu. Facete eirmod vis no. His elitr ceteros
      scriptorem in, id impedit partiendo per, eu soluta legimus nominavi vis. Novum harum ne eam. Putant oportere consulatu sed ut, sit ut stet vidisse delectus. Te est veri minim reprehendunt, ea everti reformidans eum. Saepe malorum percipitur id nec,
      causae atomorum sit ei. Et has aperiri feugait inimicus. Ei solet nominavi interesset pro, novum aliquando duo at, qui postea principes scriptorem et. Id mei discere nominavi placerat, vel movet fuisset praesent et. Intellegat interesset vel in,
      nemore impetus ad usu, illud postea eu eam. At sit numquam iracundia. Nec ex tollit viderer perfecto, quidam fabulas qui ei, modo senserit suavitate ut nec. Mea ad prodesset efficiantur, sed te quidam molestiae, platonem pericula conceptam sed at.
      Ne mea dico assueverit, eu eius denique eos. Est scaevola percipitur accommodare ne, mei te dicam nusquam salutatus. Vis at iusto iudicabit. Sea cu voluptua invidunt tacimates, ea graecis denique oportere sed.
    </div>
  </div>
</div>

Answer 1

.product-single__photos 获取 flexbox 高度，然后你需要将 height: 100% 传递给它的后代:

.product-single__photos,
.bkgd-text {
  width: 50%;
}

.bkgd-img__container {
  display: flex;
}

.product-single__photo-wrapper {
  height: 100%; /* <--- */
}

.product-single__photo {
  height: 100%; /* <--- */
}

.bkgd-img__container .bkgd-image {
  display: block;
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  position: relative;
  overflow: hidden;
  height: 100%; /* <--- */
}

.bkgd-img__container .bkgd-image:before {
  display: block;
  width: 100%;
  padding-top: 100%;
  content: "";
}

.bkgd-img__container .bkgd-text {
  display: flex;
  flex-direction: column;
  align-items: left;
  justify-content: center;
}

<div class="bkgd-img__container">
  <div class="product-single__photos ">
    <div class="product-single__photo-wrapper js">
      <div class="product-single__photo" data-image-id="image-id">
        <div id="image-id" class="feature-row__image lazyload bkgd-image" style="background-image: url('https://images.unsplash.com/photo-1506744038136-46273834b3fb?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjF9&dpr=2&auto=format&fit=crop&w=416&h=312&q=60');" tabindex="-1"></div>
      </div>
    </div>
  </div>

  <div class="product-single__info bkgd-text">
    <div class="product-single__meta">
      Product text goes here.Lorem ipsum dolor sit amet, posse audire ne mel. Movet moderatius per te. Ut dictas appetere referrentur mel. Esse efficiantur at eum. Ius debitis habemus no, cum hinc feugait fierent in. Erant consectetuer at ius, id platonem inciderint
      efficiantur pro, utamur iudicabit cu cum. Eos ne labitur offendit omittantur, te vim diceret consequuntur signiferumque. Sea ut oratio exerci aeterno, per nibh ornatus in, vim falli animal delicatissimi cu. Facete eirmod vis no. His elitr ceteros
      scriptorem in, id impedit partiendo per, eu soluta legimus nominavi vis. Novum harum ne eam. Putant oportere consulatu sed ut, sit ut stet vidisse delectus. Te est veri minim reprehendunt, ea everti reformidans eum. Saepe malorum percipitur id nec,
      causae atomorum sit ei. Et has aperiri feugait inimicus. Ei solet nominavi interesset pro, novum aliquando duo at, qui postea principes scriptorem et. Id mei discere nominavi placerat, vel movet fuisset praesent et. Intellegat interesset vel in,
      nemore impetus ad usu, illud postea eu eam. At sit numquam iracundia. Nec ex tollit viderer perfecto, quidam fabulas qui ei, modo senserit suavitate ut nec. Mea ad prodesset efficiantur, sed te quidam molestiae, platonem pericula conceptam sed at.
      Ne mea dico assueverit, eu eius denique eos. Est scaevola percipitur accommodare ne, mei te dicam nusquam salutatus. Vis at iusto iudicabit. Sea cu voluptua invidunt tacimates, ea graecis denique oportere sed.
    </div>
  </div>
</div>