CSS图片居中显示 超出div容器高度度隐藏 图片高度低于div容器高度上下不留白显示
通过固定容器的宽高加上flex布局结合css3的属性object-fit实现
.el-image{width: 100%;height: 26rem;display: flex !important;justify-content: center;align-items: center;}.el-image > img {width: 100%;height: 100%;object-fit: cover;}
效果
object-fit: fill|contain|cover|scale-down|none;
fill -------------默认，不保证保持原有的比例，内容拉伸填充整个内容容器
contain------------保持原有尺寸比例。内容被缩放。
cover---------- 保持原有尺寸比例。但部分内容可能被剪切。
scale-down-----------保持原有尺寸比例。内容的尺寸与 none 或 contain 中的一个相同，取决于它们两个之间谁得到的对象尺寸会更小一些。
none------------保留原有元素内容的长度和宽度，也就是说内容不会被重置。
如果觉得《CSS图片居中显示 超出div容器高度度隐藏 css3 object-fit》对你有帮助，请点赞、收藏，并留下你的观点哦！
