CSS 裁剪图片保持长宽比例

214月

设置图片的裁剪尺寸在 CSS 里使用这行代码：

这种写法能很好地把大小不合适的图片裁剪为合适尺寸或者圆形的图片。把 object-fit:cover 图片上，并且设置好宽和高，图片自己就会进行裁剪和居中。

有些情况宽度达到了，高度没达到，可以这样给图片加min-height

外面的div {overflow: hidden; width: 100%;height: 60px;}

需要设置的图片 .div img {width: 100%;min-height: 60px;object-fit: cover;}

这样既可以宽度、高度达到相同大小，图片是放大缩小裁切的不会变形。

object-fit:cover 的裁剪方式和 background-size:cover 的完全相同，不过它是用来为 imgs、videos 和其他的媒体标签设置样式的，而不是给背景图片设置样式。

分享到：

OnlyGrape葡提子,英文建站博客英文网站建设，用户体验设计，前段技术研究，seo网站推广