CSS图片居中显示 超出div容器高度度隐藏 css3 object-fit

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------------保留原有元素内容的长度和宽度，也就是说内容不会被重置。