Question

我想在div内显示一张图片，然后相应地将图片缩放到高度或宽度（取决于哪个更大）。

这里有个小问题，https://jsfiddle.net/efbydkLz/1/

第一个方框是应该的。图像宽度大于div-with，并相应缩放。
第二个框显示了问题：图像高度太大，无法缩放。
第三个方框显示，类别为“图片”的div尽可能大。文本可以是短的或长的，picture-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>

Answer 2

要使flex子级能够通过自己的子级百分比为值赋予可继承的（根据flex模型计算）大小，您需要使用overflow:hidden，否则使用{{1 }}将是height:100%;。

如果height:null;是flex子级，则有效，否则.picture min- max-需要在父级上设置高度值。只有height:100%能够从浏览器的窗口继承高度以计算最终值。

html{height:X%;}

.outer {
  width: 30vw;
  height: 60vh;
  border: 2px solid black;
  margin: 10px 10px 10px 10px;
  padding: 5px;
  display: flex;
  flex-flow: column;
  /* extra to work in the small snippet here */
  min-height: 250px;
}

.picture {
  background: red;
  flex-grow: 1;
  overflow:hidden;/* here make it mind its size so min-/max-/height : % can be used for the direct children */
}

img {
  max-width: 100%;
  max-height: 100%;
}

您的分叉的小提琴：https://jsfiddle.net/hb784xp1/

图像调整为父div尺寸，并保持图像高度

2 个答案: