一行css代码解决图片统一大小后的拉伸问题(object-fit)

下面就是关于“一行css代码解决图片统一大小后的拉伸问题(object-fit)”的完整攻略。

什么是object-fit

在处理图片布局的过程中，当要将不同尺寸的图片展示在同一个容器中时，会因为图片的不同宽高比例，而出现拉伸或压缩的情况，导致显示效果不够美观。而object-fit属性可以帮助我们解决这个问题，它可以通过自动调整图片的大小，让之适应他们的容器，而且保持原始图片的长宽比。

object-fit属性如何使用

object-fit属性可以用于img、video、iframe等这样的内联元素，它有以下可选值：

• fill: 会拉伸图片，保证图片铺满整个容器，不保持纵横比
• contain: 图片缩放到它们的容器中，同时保持纵横比
• cover: 图片等比例拉伸以填充容器，超出容器部分进行剪裁
• none: 保持图片原始的大小
• scale-down: 图片大小自适应（等于contain和none两者中较小的那个，即保持纵横比的前提下，缩放图片到更小的尺寸以适应容器）

其中，contain和cover是我们最常使用的两个选项，通常还需要使用object-position属性确定图片在容器中的位置。

下面是一个简单的示例：

<style>
.container {
  width: 200px;
  height: 200px;
  border: 1px solid #ccc;
  position: relative;
}
.img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}
</style>
<div class="container">
  <img class="img" src="image.jpg">
</div>

在上面的示例中，我们设置了一个包裹图片的容器，容器的宽和高均为200px，图片的object-fit属性设置为'cover'，以及object-position属性设置为'center'。这样，即可实现图片铺满容器，并且将图片居中显示的效果。

下面再给出一个多图片展示的示例：

<style>
.container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 200px;
}
.img {
  flex: 1;
  object-fit: cover;
}
</style>
<div class="container">
  <img class="img" src="image1.jpg">
  <img class="img" src="image2.jpg">
  <img class="img" src="image3.jpg">
</div>

在上面的示例中，我们设置了一个包裹多张图片的容器，容器使用flex布局，并设置了justify-content和align-items属性来实现图片的水平对齐和垂直居中。每张图片的object-fit属性设置为'cover'，以自适应容器大小。

通过上面的示例，我们可以看到，使用object-fit属性能够非常方便地解决图片在容器中的布局问题。这样，我们可以让网站中的图片在不同的分辨率下，始终保持美观的展示效果。