Resizemode详解

发布时间：2023-05-22

在开发Web应用时，经常需要展示图片。为了适应不同的屏幕尺寸，我们需要对图片进行缩放或者裁剪操作，这时候就需要用到resizemode。

一、Cover

在resizemode中，cover是最常用的一个选项。它能够自动将原图缩放至完全覆盖容器，并保持纵横比例不变，但可能剪裁图片的某些部分。 具体来说，如果原图的纵横比例与容器不同，cover选项会自动缩放原图，使之一个方向与容器相等，另一个方向上则超出容器。接着，选择超出图片的一部分进行剪裁，使得剩余的部分完全覆盖容器。这样，容器中部分区域可能显示不出原图全部内容。

.container {
  width: 200px;
  height: 200px;
}
img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

二、Contain

contain选项也能够让原图自适应容器，但是不会剪裁图片。它会将原图缩放至刚好能够完全展示，并保持纵横比例。如果容器的部分区域不能够完全覆盖原图，则该区域将会显示背景色。

.container {
  width: 200px;
  height: 200px;
}
img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

三、Stretch

stretch选项可以让原图完全填充容器，并拉伸或压缩原图来适应容器，不保持纵横比例。这样，原图可能会失真变形，并且不会显示原图的全部内容。

.container {
  width: 200px;
  height: 200px;
}
img {
  width: 100%;
  height: 100%;
  object-fit: stretch;
}

四、None

如果希望图片保持原本大小，不进行缩放或者剪裁，则可以选择none选项。

.container {
  width: 200px;
  height: 200px;
}
img {
  width: auto;
  height: auto;
  object-fit: none;
}

五、Scale-down

scale-down选项也能够让原图自适应容器，但它不会拉伸或者压缩原图。如果原图已经小于容器，则直接按原图显示。否则，与contain选项类似，缩放原图并完全展示。

.container {
  width: 200px;
  height: 200px;
}
img {
  width: 100%;
  height: 100%;
  object-fit: scale-down;
}

六、总结

以上介绍的是常见的resizemode选项，但并不是所有浏览器都支持所有选项。如果需要兼容多个浏览器，建议在代码中同时使用多种resizemode选项，并通过CSS前缀和JavaScript进行特定浏览器的兼容。

推荐文章