将图像缩放到 flexbox 中的最大尺寸 [重复]

Posted 2023-03-06

【中文标题】将图像缩放到 flexbox 中的最大尺寸 [重复]

【英文标题】：Scale image to max size in a flexbox [duplicate]

【发布时间】：2016-01-09 01:24:15

【问题描述】：

我有一个 flexbox，其中包含几个宽度约为 50% 的 flexbox 项目。一个 flexbox 项目要么包含一个或多个 <p> 元素，要么包含一个 <img />。

带有图片的 flexbox 项目应该完全填充图片，而不是将其设置为周围 div 的背景。图片下方似乎总是有一个小红条，即使图像填满整个宽度。如何使图像填满整个 flexbox 项？

图像的纵横比是否改变无关紧要。

我不只是希望图像下方的空白区域消失。我希望它也可以伸展以使用 flexbox 项目的整个宽度。所以它填充了 flexbox 项。

.container 
  width: 500px;

.flexbox 
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;

.flex-item 
  border: 1px solid black;
  background: red;
  margin: 25px 0;
  width: 47%;
  flex-basis: 47%;

img 
  max-width: 100%;
  background: white;

<div class="container flexbox">
  <div class="flex-item">
    <p>It should work with a big image</p>
  </div>
  <div class="flex-item">
    <img src="http://goo.gl/6EO4mj" />
  </div>
  <div class="flex-item">
    <p>But also with a small one</p>
  </div>
  <div class="flex-item">
    <img src="http://goo.gl/nxXSMO" />
  </div>
  <div>

编辑：增加了重点。添加了更多解释。

【问题讨论】：

您似乎没有在这里真正尝试过任何东西。是的，您有代码，但我没有看到任何迹象表明您已尝试拉伸该图像或以其他方式填充容器。

@cimmanon 我尝试了几种显示模式。使用更高的最大宽度。从父 div 继承宽度。我就是无法让它正常工作。

备用副本：***.com/questions/16501668/…

您阅读了所有个答案还是只阅读了第一个答案的一半？

@cimmanon Jesus.. 我之前尝试过 100% 宽度，所以我没有再费心再试一次，但现在我发现我在 css 的那部分有错字.. 感谢您的固执伙计，因为你实际上帮助我找到了我的错误。

【参考方案1】：

将display:block 添加到 img ：

.container 
  width: 500px;

.flexbox 
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;

.flex-item 
  border: 1px solid black;
  background: red;
  margin: 25px 0;
  width: 47%;
  flex-basis: 47%;

img 
  max-width: 100%;
  background: white;
  display :block

<div class="container flexbox">
  <div class="flex-item">
    <p>It should work with a big image</p>
  </div>
  <div class="flex-item">
    <img src="http://goo.gl/6EO4mj" />
  </div>
  <div class="flex-item">
    <p>But also with a small one</p>
  </div>
  <div class="flex-item">
    <img src="http://goo.gl/nxXSMO" />
  </div>
  <div>

说明：img默认显示inline和vertical-align:baseline，你看到的空间是基线下的空间。

您也可以将垂直对齐方式更改为middle；