html - 图像调整到父 div 保持比例并尊重图像高度

Question

我想在 div 中显示图片，图片会相应地缩放到高度或宽度，具体取决于哪个较大。

这是一个有问题的小 jsfiddle:https://jsfiddle.net/efbydkLz/1/

• 第一个方框应该是这样的。 image-width 大于 div-with 并相应缩放。
• 第二个框显示了问题:图像高度太大，无法缩放。
• 第三个框显示，“图片”类的 div 已尽可能大。文本可长可短，图片部分占据剩余空间。

图像以某种方式仅忽略父 div 的高度。它对宽度做出正确响应。

有谁知道如何正确缩放图像，使图像始终位于 picture-div 内并且不会忽略 div-height？

提前致谢!

.outer {
  width: 30vw;
  height: 300px;
  border: 2px solid black;
  margin: 10px 10px 10px 10px;
  padding: 5px;
  display: flex;
  flex-flow: column;
}

.picture {
  background: red;
  flex-grow: 1;
}

img {
  max-width: 100%;
  max-height: 100%;
}

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row">
  <div class="outer">
    <div class="text">
      Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
    </div>
    <div class="picture">
      <img src="https://via.placeholder.com/500x100">
    </div>
  </div>
  <div class="outer">
    <div class="text">
      Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore.
    </div>
    <div class="picture">
      <img src="https://via.placeholder.com/100x500">
    </div>
  </div>
  <div class="outer">
    <div class="text">
      Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et
    </div>
    <div class="picture">
    </div>
  </div>
</div>

Answer 1

当您在图像周围添加额外的包装器 div 时，这会起作用。将picture-inner的背景涂成蓝色，这样可以更好的看到布局效果。

.outer {
  width: 30vw;
  height: 300px;
  border: 2px solid black;
  margin: 10px 10px 10px 10px;
  padding: 5px;
  display: flex;
  flex-flow: column;
}

.picture {
  background: red;
  flex-grow: 1; /* make sure the picture container takes up all remaining space */
  display: flex;
  flex-direction: column;
}

.picture-inner {
  background: blue;
  max-height: 100%; /* img doesnt respect its own max-height rule as expected without this extra wrapper */
}

.picture img {
  max-width: 100%;
  max-height: 100%;
}

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row">
  <div class="outer">
    <div class="text">
      Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
    </div>
    <div class="picture">
      <div class="picture-inner">
        <img src="https://via.placeholder.com/500x100">
      </div>
    </div>
  </div>
  <div class="outer">
    <div class="text">
      Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore.
    </div>
    <div class="picture">
      <div class="picture-inner">
        <img src="https://via.placeholder.com/100x500">
      </div>
    </div>
  </div>
  <div class="outer">
    <div class="text">
      Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et
    </div>
    <div class="picture">
    </div>
  </div>
</div>