CSS3 图片充满容器,截取中间的部分展示

1,117 阅读1分钟

图片展示原则:

1、不论什么尺寸的图片,放到固定容器中,要将图片放大到长和宽能充满整个 Div,然后截取中间的部分展示

2、任何时候不单方向拉伸、缩小图片

解决方法:

dom 结构

<div className="file-thumbnail-wrap">
    <img src='test.png'} />
</div>

css 样式

.file-thumbnail-wrap{
  width: 80px;
  height: 80px;
  overflow: hidden;
}
.file-thumbnail-wrap img{
  width: 100%;
  height: 100%;
  object-fit: cover;
}

参考:blog.csdn.net/weixin_3764…