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

冉娃娃
  • 1.2k

限制条件

  • 父元素宽度不固定
  • 父元素宽高比是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的时候
  • 下面就会有空白

clipboard.png

问题

  • 如何让图片拉伸整个父元素
  • 可以裁剪
回复
阅读 4.4k
5 个回答

使用object-fit:cover即可

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

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

试试

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

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

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

宣传栏