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------------保留原有元素内容的长度和宽度，也就是说内容不会被重置。
————————————————
版权声明：本文为CSDN博主「我胖虎不答应！！」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/weixin_42508580/article/details/119237825