[分享]css不同比例的两组图片展示

在网页设计中，图片的使用是非常重要的一个部分。为了展示图片更美观、更合理，我们可以运用各种 CSS 技巧。比如，可以使用 CSS 中的 width 和 height 属性对图片进行调整以适应不同的屏幕...

在网页设计中，图片的使用是非常重要的一个部分。为了展示图片更美观、更合理，我们可以运用各种 CSS 技巧。比如，可以使用 CSS 中的 width 和 height 属性对图片进行调整以适应不同的屏幕尺寸。又比如，可以使用 object-fit 属性来控制图片在容器中的比例，实现更好的布局效果。

下面我们来看一下使用不同比例的两组图片展示的效果：

<div class="img-container">
  <img src="image1.jpg" alt="image 1" class="img-1">
</div>

.img-container {
  display: flex;
  justify-content: center;
}

.img-1 {
  width: 600px;
  height: 400px;
} 

上面的代码实现了一个宽高比为 3:2 的图片展示。如果我们希望展示的图片宽高比为 1:1 呢？

<div class="img-container">
  <img src="image2.jpg" alt="image 2" class="img-2">
</div>

.img-container {
  display: flex;
  justify-content: center;
}

.img-2 {
  width: 600px;
  height: 600px;
  object-fit: cover;
} 

上面的代码展示了宽高比为 1:1 的图片，使用了 object-fit 属性来调整图片在容器中的比例。我们可以看到，通过不同的 CSS 属性，我们可以非常方便地对图片进行比例调整，实现更好的展示效果。