Question

我有一个带有3个图像的flex我希望它们调整大小，如果窗口太小，当窗口变小，首先重新排序，使它们垂直堆叠，当窗口变得更小时，图片被挤压而不是调整大小我会想要保持图像的正确宽高比。

＆＃13;

.images {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
}
.images div {
  display: flex;
  margin: 1rem;
}
.images img {
  height: 16rem;
  max-width: 100%;
}

＆＃13;

<div class="images">
  <div>
    <img src="http://placehold.it/150x200">
  </div>
  <div>
    <img src="http://placehold.it/150x150">
  </div>
  <div>
    <img src="http://placehold.it/150x100">
  </div>
</div>

＆＃13;

Answer 1

首先要记住保持宽高比的基本要素（我确定你已经知道这一点）是仅限制图像的一个维度。（阅读this）

您已经在代码中破坏了这一点 - 导致了＆＃39;挤压＆＃39;在较小的屏幕宽度：

.images img {
  height: 16rem;
  max-width: 100%;
}

当窗口变小时，它们会重新排序，因此它们会垂直堆叠当窗口变得更小时，图片会被挤压而不是调整大小我想保持图像具有适当的宽高比。

所以这是您的选择：

所以我猜你应该删除max-width: 100%并根据16rem高度保持宽度调整。

＆＃13;

.images {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
}
.images div {
  display: flex;
  margin: 1rem;
}
.images img {
  height: 16rem;
  /*max-width: 100%;*/
}

＆＃13;

<div class="images">
  <div>
    <img src="http://placehold.it/150x200">
  </div>
  <div>
    <img src="http://placehold.it/150x150">
  </div>
  <div>
    <img src="http://placehold.it/150x100">
  </div>
</div>

＆＃13;

嗯，对于小宽度，你会有水平滚动。根据具体情况，如果需要，您可以使用一些媒体查询来调整小屏幕宽度的高度。

让我知道您对此的反馈。谢谢！

Answer 2

.images img{
      height: 16rem;
    max-width: 100%;
    object-fit: contain;
    }

Answer 3

对于宽高比修复，您只需使用 CSS3 object-fit属性即可运行。 CSS3 Object-Fit

将其设置为您的图像：

.images img {
    object-fit: contain;
}

这应该可以保持图像的宽高比。

对于在Flex容器中发生的包装，只需取出代码中的flex-wrap属性，这样它们就会保持在同一行，而不是随着容器大小变小而包装

修改

尝试将align-self CSS属性添加到.images img，看看您是否正在寻找：

.images { display: flex; justify-content: center; flex-wrap: wrap; } .images div { display: flex; margin: 1rem; } .images img { width: 100%; height: auto; object-fit: contain; align-self: flex-start; }

希望这有帮助！

调整flex div图像的大小而不是裁剪

3 个答案: