不管是在pc端还是在移动端,页面都必不可少的会出现很多图片,正常情况下,我们让图片100%自适应显示的话,如图下:
在这里可以看到,图片有大有小,但是有时候我们需要图片显示的大小是一样,而且不能变形,
那么我们需要给图片加入以下样式代码:【主要是object-fit: cover;属性】
.panorama li img{
display: block;
width:100%;
height:120px;
object-fit: cover;
}
加入后,显示如下,是我们想要的结果:
个人体会:其实这个属性类似与小程序中mode='aspectFill'属性:
<image src="http://cdn.test.mainaer.com/uploads/20160720/1640028decfe.jpg" mode='aspectFill'/>
该属性意义:保持纵横比缩放图片,只保证图片的短边能完全显示出来。也就是说,图片通常只在水平或垂直方向是完整的,另一个方向将会发生截取。
附:启蒙链接:https://blog.csdn.net/baidu_41205301/article/details/78764775