如何优雅的实现图片自动居中裁剪
如何优雅的实现图片自动居中裁剪

如何优雅的实现图片自动居中裁剪

使用css3 object-fit属性

(css3新增属性,可能会有浏览器兼容问题)

img{
    width: 200px;
    height: 200px;
    object-fit: cover;
}

这个CSS属性可以达到最佳最完美的居中自动剪裁图片的功能。

  • fill: 中文释义“填充”。默认值。图片拉伸填满容器, 不保证保持原有的比例缩放。
  • contain: 中文释义“包含”。保持原有尺寸比例缩放。长边匹配,短边留空。
  • cover: 中文释义“覆盖”。保持原有尺寸比例缩放。短边匹配,裁剪过长区域。即是我们想要的效果
  • none: 中文释义“无”。保持原有尺寸比例。不缩放。
  • scale-down: 中文释义“降低”。如若依次设置了none或contain, 最终呈现的是尺寸比较小的那个。
  • 注意:宽度、高度要给到固定值,否则将不生效

https://blog.csdn.net/BenChiZhuBaDaoWang/article/details/124762878

发表回复

您的电子邮箱地址不会被公开。