Question

我有包含图像部分和文本部分的弹性框项目，两者都有50％的宽度。我希望项目的高度受图像高度和图像的高度限制，以保持其宽高比。

正如你在代码笔中看到的那样：

图像确实保持方形纵横比（好）
每个弹性框项目的图像下方有一些像素（坏）。我希望这个空间消失。这可能吗？

HTML

<div class="flex-container">
  <div class="inner-flex-container">
    <img 
         src="https://forums.macrumors.com/attachments/img_0264-png.670820/" 
         class="image" />
    <div class="text">Text</div>
  </div>
  <div class="inner-flex-container">
    <img 
         src="https://forums.macrumors.com/attachments/img_0264-png.670820/" 
         class="image" />
    <div class="text">Text</div>
  </div>
  <div class="inner-flex-container">
    <img 
         src="https://forums.macrumors.com/attachments/img_0264-png.670820/" 
         class="image" />
    <div class="text">Text</div>
  </div>
  <div class="inner-flex-container">
    <img 
         src="https://forums.macrumors.com/attachments/img_0264-png.670820/" 
         class="image" />
    <div class="text">Text</div>
  </div>
</div>

CSS

.flex-container {
  width: 600px;
  background-color: gray;
  margin-left: auto;
  margin-right: auto;
  flex-wrap: wrap;
  display: flex;
}

.inner-flex-container {
  width: 50%;
}

.image, .text {
  display: inline-block
}

.image {
  height: auto;
  max-width: 50%
}

代码笔

https://codepen.io/anon/pen/geozyK

使用保留的图像比例使图像大小限制flexbox项目？

0 个答案: