html - 图像适合特定尺寸的 flexbox

Question

所以，我刚才提出了一个类似的问题，关于 img 如何适合 div，答案是设置 height: 100% 和 width: 100%的形象，它运作良好。但是现在我还在那个 div 中使用了一个 flexbox 并且 img 仍然在底部溢出......

.d1 {
  background: green;
  width: 300px;
  height: 100px;
  padding: 5px;
}

.d2 {
  background: red;
  display: flex;
  padding: 5px;
}

.img1 {
  width: 100%;
  height: 100%;
}

<div class="d1">
  <div class="d2">
    <img class="img1" src="https://upload.wikimedia.org/wikipedia/commons/3/3c/Cityoflondon2019june.jpg">
  </div>
</div>

Answer 1

将 height:100% 赋给图像的父 div。同时调整您的填充或使用 calc 设置高度 height:calc(100% - 10px) 见下文。

.d1 {
  background: green;
  width: 300px;
  height: 100px;
  padding: 5px;
}

.d2 {
  background: red;
  display: flex;
  padding: 5px;
  height: calc(100% - 10px);
}

.img1 {
  width: 100%;
  height: 100%;
}

<div class="d1">
  <div class="d2">
    <img class="img1" src="https://upload.wikimedia.org/wikipedia/commons/3/3c/Cityoflondon2019june.jpg">
  </div>
</div>

希望这有帮助:)