CSS Flex 布局实现图片容器的宽高与图片本身宽高不同步问题-JavaScript中文网-JavaScript教程资源分享门户

问题描述

在前端开发中，我们经常需要将多张图片放在一个容器中展示，但是这些图片的宽高可能不一致，这就会导致容器的宽高与图片的宽高不同步，从而影响用户的视觉体验。

比如下面的示例，我们有三张图片，它们的宽高分别为 200x200、300x400、400x300，我们希望将它们放在一个容器中，但是容器的宽高与图片的宽高不同步，导致图片之间的间隔不均匀，视觉效果不佳。

解决方法

CSS Flex 布局提供了一种简单而强大的方式来解决这个问题。

我们可以将容器设置为 Flex 布局，并将其子元素（即图片）设置为 Flex 项目，然后使用 flex-grow 属性来自动调整它们的宽高，使它们填充容器并保持等间距。

具体来说，我们需要做以下几个步骤：

将容器设置为 Flex 布局
```
.container {
  display: flex;
  flex-wrap: wrap;
}
```
这里我们使用了 flex-wrap: wrap 属性来让 Flex 项目自动换行，从而适应容器的宽度。
将子元素设置为 Flex 项目
```
.container img {
  flex: 1;
}
```
这里我们使用了 flex: 1 属性来让子元素自动填充容器，并保持等间距。
设置图片的宽高
```
.container img {
  width: 100%;
  height: auto;
}
```
这里我们将图片的宽度设置为 100%，高度自适应，从而保持图片的原始宽高比例。

最终的代码示例如下：

// javascriptcn.com 代码示例
<div class="container">
  <img src="https://i.ibb.co/sPnS2Qj/image1.png" alt="">
  <img src="https://i.ibb.co/6HgFjK9/image2.png" alt="">
  <img src="https://i.ibb.co/7JkFH5Z/image3.png" alt="">
</div>

<style>
  .container {
    display: flex;
    flex-wrap: wrap;
  }

  .container img {
    flex: 1;
    width: 100%;
    height: auto;
  }
</style>

最终效果如下：

总结

CSS Flex 布局是一种非常强大的布局方式，可以轻松解决多种前端布局问题。在处理图片容器的宽高与图片本身宽高不同步问题时，我们可以使用 Flex 布局的 flex-grow 属性来自动调整图片的宽高，从而保持等间距，提升用户的视觉体验。

来源：JavaScript中文网，转载请注明来源本文地址：https://www.javascriptcn.com/post/6587a6c1eb4cecbf2dcead9c