经常会有一些需求,不同宽高比的图片并排展示,为了美观,都展示成正方形,而且截取图片的最中间部分展示,这样图片看上去不变形。
可以通过下面css代码实现:
background-image: url(1.jpg); background-repeat: no-repeat; background-position: center; background-size: cover;
当然也可以将上面的整合为一行:
background: url(1.jpg) center/cover no-repeat;
预览请点
本文固定链接: https://www.weisay.com/blog/css-controls-middle-square-area.html | 威言威语
发表评论