在 CSS FlexBox 布局中自动调整图像大小并保持纵横比？

Posted 2023-03-05

技术标签:

【中文标题】在 CSS FlexBox 布局中自动调整图像大小并保持纵横比？【英文标题】：Auto Resize Image in CSS FlexBox Layout and keeping Aspect Ratio? 【发布时间】：2014-02-01 22:14:40 【问题描述】：

我使用了如下所示的 CSS flex box 布局：

如果屏幕变小，它会变成这样：

问题在于图像未调整大小以保持原始图像的纵横比。

如果屏幕变小，是否可以使用纯 CSS 和 flex box 布局来调整图像大小？

这是我的html：

<div class="content">
  <div class="row"> 
    <div class="cell">
      <img src="http://i.imgur.com/OUla6mK.jpg"/>
    </div>
    <div class="cell">
      <img src="http://i.imgur.com/M16WzMd.jpg"/>
    </div>
  </div>
</div>

我的 CSS：

.content 
    background-color: yellow;    


.row 
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;

    -webkit-box-orient: horizontal; 
    -moz-box-orient: horizontal;
    box-orient: horizontal;
    flex-direction: row;

    -webkit-box-pack: center;
    -moz-box-pack: center;
    box-pack: center;
    justify-content: center;

    -webkit-box-align: center;
    -moz-box-align: center;
    box-align: center;  
    align-items: center;

    background-color: red;



.cell 
    -webkit-box-flex: 1;
    -moz-box-flex: 1;
    box-flex: 1;
    -webkit-flex: 1 1 auto;
    flex: 1 1 auto; 

    padding: 10px;
    margin: 10px;

    background-color: green;
    border: 1px solid red;
    text-align: center;

【问题讨论】：

【参考方案1】：

img max-width:100%; 是这样做的一种方式。只需将其添加到您的 CSS 代码中即可。

http://jsfiddle.net/89dtxt6s/

【讨论】：

如果屏幕变小了，高度维度是否也可以这样做？ @confile 很大程度上取决于您的代码布局，但您可以尝试将height:100%; 添加到img css。 height: 100vh 会这样做，而不是 height: 100%。高度的造型总是很棘手。为什么这被标记为正确答案？ Omega不是把它变成了浏览器默认行为吗？ jsfiddle.net/89dtxt6s/221【参考方案2】：

我建议查看background-size 选项来调整图像大小。

如果您将图像设置为背景图像，您可以设置：

background-size: contain

或

background-size: cover

这些选项在缩放图像时会考虑高度和宽度。这将适用于 IE9 和所有其他最新的浏览器。

【讨论】：

【参考方案3】：

我正在使用 jquery 或 vw 来保持比例

jquery

function setSize() 
    var $h = $('.cell').width();
    $('.your-img-class').height($h);

$(setSize);
$( window ).resize(setSize);

大众

 .cell
    width:30vw;
    height:30vw;

.cell img
    width:100%;
    height:100%;

【讨论】：

【参考方案4】：

在第二张图片中，您似乎希望图片填充框，但您创建的示例确实保持了纵横比（宠物看起来正常，不瘦也不胖）。

我不知道您是否将这些图像作为示例进行了 photoshop，或者第二个示例也是“应该如何”（您说的是，而第一个示例您说的是“应该”）

无论如何，我必须假设：

如果“图像未调整大小以保持纵横比”并且您向我展示了确实保持像素纵横比的图像，我必须假设您正在尝试完成“裁剪”区域的纵横比（绿色的内部）WILE保持像素的纵横比。 IE。您想通过放大和裁剪图像来用图像填充单元格。

如果这是您的问题，那么您提供的代码不会反映“您的问题”，而是您的起始示例。

鉴于前两个假设，如果框的高度是动态的，但使用背景图像，则无法使用实际图像来完成所需的操作。通过使用“背景大小：包含”或这些技术（以百分比限制裁剪的智能填充或您想要的最大尺寸）： http://fofwebdesign.co.uk/template/_testing/scale-img/scale-img.htm

图像唯一可行的方法是，如果我们忘记了您的第二个 iimage，并且单元格具有固定的高度，幸运的是，根据您的示例图像判断，高度保持不变！

因此，如果您的容器的高度没有改变，并且您希望图像保持正方形，您只需将图像的最大高度设置为该已知值（减去填充或边框，具体取决于框大小细胞的属性）

像这样：

<div class="content">
  <div class="row">    
      <div class="cell">    
          <img src="http://lorempixel.com/output/people-q-c-320-320-2.jpg"/>
      </div>
      <div class="cell">    
          <img src="http://lorempixel.com/output/people-q-c-320-320-7.jpg"/>
      </div>
    </div>
</div>

还有 CSS：

.content 
    background-color: green;


.row 
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;

    -webkit-box-orient: horizontal; 
    -moz-box-orient: horizontal;
    box-orient: horizontal;
    flex-direction: row;

    -webkit-box-pack: center;
    -moz-box-pack: center;
    box-pack: center;
    justify-content: center;

    -webkit-box-align: center;
    -moz-box-align: center;
    box-align: center;  
    align-items: center;



.cell 
    -webkit-box-flex: 1;
    -moz-box-flex: 1;
    box-flex: 1;
    -webkit-flex: 1 1 auto;
    flex: 1 1 auto;
    padding: 10px;
    border: solid 10px red;
    text-align: center;
    height: 300px;
    display: flex;
    align-items: center;
    box-sizing: content-box;

img 
    margin: auto;
    width: 100%;
    max-width: 300px;
    max-height:100%

http://jsfiddle.net/z25heocL/

您的代码无效（开始标记而不是结束标记，因此它们输出 NESTED 单元格，而不是同级单元格，他在错误代码中使用了您的图像的 SCREENSHOT，并且弹性框没有容纳单元格，但两个示例都在一列（您设置了“行”，但是将一个单元格嵌套在另一个单元格中的损坏代码导致了 flex 中的 flex，最终作为 COLUMNS 工作。我不知道你想要完成什么，以及你是如何想出这段代码的，但我猜你想要的是这个。

我也向单元格添加了 display: flex，因此图像居中（我认为 display: table 也可以在这里使用所有这些标记）

【讨论】：

您似乎根本不知道我是如何回答这个问题的。该jsfiddle中的所有html和css都是提问者（@confile）提供的。只需阅读问题，您就会看到。我的解决方案是一行简单的 css img max-width:100%; 并且提问者在一年前接受了我的回答，因为它提供了所要求的解决方案。在这里祝您一切顺利，请尝试正确阅读问题，然后在以后做出相应的回答，谢谢。【参考方案5】：

我来这里是为了寻找我扭曲图像的答案。不完全确定 op 在上面寻找什么，但我发现添加 align-items: center 会为我解决这个问题。阅读文档，如果您直接弯曲图像，覆盖它是有意义的，因为align-items: stretch 是默认值。另一种解决方案是先用 div 包装图像。

.myFlexedImage 
  display: flex;
  flex-flow: row nowrap;
  align-items: center;

【讨论】：

“我来这里是为了寻找我扭曲图像的答案”我出于同样的原因来到这里，您的解决方案帮助了我（标记为实际解决方案的内容根本没有帮助我）这对我也有帮助，有人能解释一下为什么会这样吗？这对我来说是正确的答案。最大宽度：100%；没有纠正高度（高度仍然略微拉伸）。就我而言，我使用了 align-items: flex-start;因为我不希望图像在容器中垂直居中，但它仍然有效，因为它覆盖了默认的 align-items：stretch;这是您可以用来覆盖的对齐项的所有属性值的列表：w3schools.com/cs-s-ref/css3_pr_align-items.asp 尝试了很多东西，但是你在父节点上的 align-items:center 是唯一成功的。这应该是公认的答案。 Align-content 在拉伸方面对我不起作用，但 align-items 确实如此，两者都有不同的功能。这个 SE 清除了两者之间的区别：***.com/questions/27539262/…【参考方案6】：

您可能想尝试一下非常新且简单的 CSS3 功能：

img  
  object-fit: contain;

它保留了图片比例（就像您使用背景图片技巧时一样），并且在我的情况下很好地解决了同样的问题。

但请注意，IE 不支持它（请参阅支持详细信息here）。

【讨论】：

请记住，父对象必须是 flex 我试过了，它在 flex div 中完美运行。谢谢！我一直在寻找这个，我不敢相信它不是更受欢迎，我一直在解决这个问题并使用解决方法【参考方案7】：

HTML：

<div class="container">
    <div class="box">
        <img src="http://lorempixel.com/1600/1200/" >
    </div>
</div>

CSS：

.container 
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: stretch;

  width: 100%;
  height: 100%;

  border-radius: 4px;
  background-color: hsl(0, 0%, 96%);


.box 
  border-radius: 4px;
  display: flex;


.box img 
  width: 100%;
  object-fit: contain;
  border-radius: 4px;

【讨论】：

【参考方案8】：

这就是我在灵活的网格中处理不同图像（大小和比例）的方式。

.images 
  display: flex;
  flex-wrap: wrap;
  margin: -20px;


.imagewrapper 
  display: flex;
  justify-content: center;
  align-items: center;
  width: calc(50% - 20px);
  height: 300px;
  margin: 10px;


.image 
  display: block;
  object-fit: cover;
  width: 100%;
  height: 100%; /* set to 'auto' in IE11 to avoid distortions */

<div class="images">
  <div class="imagewrapper">
    <img class="image" src="https://via.placeholder.com/800x600" />
  </div>
  <div class="imagewrapper">
    <img class="image" src="https://via.placeholder.com/1024x768" />
  </div>
  <div class="imagewrapper">
    <img class="image" src="https://via.placeholder.com/1000x800" />
  </div>
  <div class="imagewrapper">
    <img class="image" src="https://via.placeholder.com/500x800" />
  </div>
  <div class="imagewrapper">
    <img class="image" src="https://via.placeholder.com/800x600" />
  </div>
  <div class="imagewrapper">
    <img class="image" src="https://via.placeholder.com/1024x768" />
  </div>
</div>

【讨论】：

【参考方案9】：

为单元格 div 设置 50% 的宽度或特定数字。对于 img 标签，将宽度设置为 100%。这样一来，宽度必须始终为 100%，并且高度会相应变化，同时保持纵横比不变。

【讨论】：

以上是关于在 CSS FlexBox 布局中自动调整图像大小并保持纵横比？的主要内容，如果未能解决你的问题，请参考以下文章

Flexbox 图像在浏览器中的大小调整不同

flex布局

css3弹性盒模型（Flexbox）

CSS flexbox：使用深度嵌套的图像来摊销不断变化的布局尺寸

如何使用自动布局来调整图像按钮的大小？

在css中调整图像大小以自动调整div [重复]