214月

CSS 裁剪图片保持长宽比例

前端开发DIV+CSS, 英文网站建设

设置图片的裁剪尺寸在 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 的完全相同,不过它是用来为 imgsvideos 和其他的媒体标签设置样式的,而不是给背景图片设置样式。


分享到:



No comments

星期五, 四月 21st, 2017 | 分类:前端开发DIV+CSS, 英文网站建设 | RSS 2.0 | 留言/评论 | Trackback

留言