css 大小不一的图片排列

CSS 是网页设计中的重要元素之一，它可以用来排列页面上的元素，美化网站的外观。其中，将大小不一的图片进行排列也是常见的一种需求，今天我们来学习如何实现。

HTML 代码：div class="container">
      img src="image1.jpg">
      img src="image2.jpg">
      img src="image3.jpg">
      img src="image4.jpg">
    /div>
CSS 代码：.container{
        display:flex;
      /*开启 flex 布局*/    flex-wrap: wrap;
  /*换行显示*/}
.container img{
        margin:10px;
      /*设置图片之间的间距*/    flex: 1;
      /*将图片的宽度平均分配*/    height: auto;
  /*根据原尺寸等比例缩放图片*/}
    

我们首先在 HTML 中创建一个 `div`，并向其中添加四张不同尺寸的图片。在 CSS 中，我们为这个 `div` 添加了一个 `container` 类，并设置了 `display:flex; ` 开启了 flex 布局，`flex-wrap:wrap; ` 表示父元素内的子元素在必要的时候换行，`margin:10px; ` 设置图片之间的间距，`flex:1; ` 将图片的宽度平均分配，`height:auto; ` 根据原尺寸等比例缩放图片。

这样，我们就实现了大小不一的图片排列。因为每张图片的宽度都是均分的，所以能够很好的展示每张图片的主体。

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！