[已解决]纯css实现图片拉伸整个父元素

Question

限制条件

• 父元素宽度不固定
• 父元素宽高比是4:3
• 图片尺寸不固定
• 不使用背景图

示例代码

基于bootstrap4栅格布局

html

.row
  .father.col-md-3.col-sm-6.col-12
    img.son

我目前的css

.father {
  padding-bottom: 75%;
  height: 0;
  overflow: hidden;
}
.son {
  width: 100%;
}

我这个css的问题

• 当图片是4:1,4:2的时候
• 下面就会有空白

问题

• 如何让图片拉伸整个父元素
• 可以裁剪

Answer 1

全兼容的解决方案

css object-fit:cover;兼容性非常感人。建议用js 处理

Answer 2

使用object-fit:cover即可

img{
    width:100%;
    height:100%;
    object-fit:cover;
}

Answer 3

填不满的,本来比例就不一致,如果让高度填满,部分图片内容就会显示不了

Answer 4

试试

.son {
  height: 100%;
  width：auto；
}

还有图片比例大于4:3，宽度又会填不满，全部100%，图片会变形
纯css不好实现

Answer 5

不用 img 标签，换成固定高度的 div，使用 css background 显示图片，background-size: cover 会使图片填满 div