html - 如何使两列与图像保持相同的高度？

Question

我们有一个两列布局，其中图像在一侧，文本在另一侧。我们希望图像与内容的高度相同。当文本列达到一定高度时，我们遇到了一个问题，它不会使图像达到全高。虽然没有添加，但是这个.flex__wrapper被外层包围<div class="container">元素，以便我们可以处理我们可能想要限制宽度的较大屏幕。

我们怎样才能做到这一点？我们当前的解决方案使用 flexbox ，但我们也尝试了以下解决方案，但均未解决问题。

目标:

• 随着包含文本的右侧列的高度增加，我希望图像也占据相同的高度。

我们尝试过各种解决方案，但没有奏效。它们似乎适用于文本和文本，但不适用于文本和图像。

1. > Make two columns the same height (using Flexbox)
2. > Keep columns with same height (using Tables)

.flex__wrapper {
 display: flex;
 position: relative;
 align-items: center;
 background-color: #eee;
}

[class*=col--] {
 box-sizing: border-box;
}

.col--m-s-12 {
width: 100%;
}

.col--t-s-6 {
width: 50%; 
}

img {
display: block;
height: auto;
}

<div class="flex__wrapper">
  <div class="col--m-s-12 col--t-s-6">
    <img src="https://thumb1.shutterstock.com/display_pic_with_logo/422872/1024946740/stock-photo-large-group-of-business-people-standing-with-folded-hands-togeth-1024946740.jpg">
  </div>
  <div class="col--m-s-12 col--t-s-6">
    <div>Distinctively engineer timely benefits before leading-edge technology. </div>
    <div>Quickly brand strategic web-readiness whereas global relationships. Credibly underwhelm interdependent e-markets via plug-and-play value. Professionally maximize emerging partnerships rather than equity invested information. Objectively morph intuitive applications rather than multimedia based best practices. Competently innovate covalent infrastructures after premium relationships.

Globally conceptualize holistic sources and leveraged synergy. Distinctively maintain stand-alone content without market-driven niche markets. Completely orchestrate seamless channels after high-quality synergy. Rapidiously scale cutting-edge niche markets with reliable innovation. Intrinsicly productize multifunctional manufactured products without high standards in e-tailers.</div>
  </div>
</div>

当前问题:

附加问题:

期望的结果:

Answer 1

您需要在图像上应用 max-width:100%。现在，即使在应用以下样式后，您的图像也不会全屏显示(1600*900px)，这是因为您的原始图像尺寸较小(450*274)并且您试图适应的容器是 792px约尝试使用更大的图像然后它会被解决。

.flex__wrapper {
  display: flex;
  position: relative;
  background-color: #eee;
  flex-wrap: wrap;
}
@media screen and (min-width: 1024px) {
  .flex__wrapper {
    max-width: 56%;
   }
}
[class*=col--] {
  box-sizing: border-box;
  flex-basis: 0;
    flex-grow: 1;
    max-width: 100%;
}

.col--m-s-12 {
  width: 100%;
}

.col--t-s-6 {
  width: 50%;
}

img {
  height: 100%;
  width: 100%;
  object-fit:cover;
}

<div class="flex__wrapper">
  <div class="col--m-s-12 col--t-s-6" style="border:solid 1px;">
   <img src="https://thumb1.shutterstock.com/display_pic_with_logo/422872/1024946740/stock-photo-large-group-of-business-people-standing-with-folded-hands-togeth-1024946740.jpg" class="img-fluid">
  </div>
  <div class="col--m-s-12 col--t-s-6">
    <div>Distinctively engineer timely benefits before leading-edge technology. </div>
    <div>Quickly brand strategic web-readiness whereas global relationships. Credibly underwhelm interdependent e-markets via plug-and-play value. Professionally maximize emerging partnerships rather than equity invested information. Objectively morph intuitive
      applications rather than multimedia based best practices. Competently innovate covalent infrastructures after premium relationships. Globally conceptualize holistic sources and leveraged synergy. Distinctively maintain stand-alone content without
      market-driven niche markets. Completely orchestrate seamless channels after high-quality synergy. Rapidiously scale cutting-edge niche markets with reliable innovation. Intrinsicly productize multifunctional manufactured products without high standards
      in e-tailers.</div>
  </div>
</div>