首页 > 技术文章 > 已知父级盒子的宽高,子级img宽高未知,想让img铺满父级盒子且图片不能变形

lovecode3000 2020-09-20 18:40 原文

在编写小程序中,img有多个属性可以自动进行图片大小调整,当时一直在想,如果普通的css中也有一个属性多好

这里终于找到有一个关键的css属性,就是object-fit: cover;,效果类似背景图片的background-size: cover;属性

  <style>
    .box {
      width: 200px;
      height: 200px;
    }
    img {
      object-fit: cover;
      width: 100%;
      height: 100%;
     /* background-size: cover;
      background-image: url(https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1600607493202&di=ace740b…&imgtype=0&src=http%3A%2F%2Fattachments.gfan.com%2Fforum%2Fattachments2%2Fday_110320%2F1103202….jpg);
      background-position: center;    */
    }
  </style>

  <div class='box'>
    <img
      src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1600607493202&di=ace740b8f4ad255c5f5a5dbff98aa57f&imgtype=0&src=http%3A%2F%2Fattachments.gfan.com%2Fforum%2Fattachments2%2Fday_110320%2F11032021067b907d3ed754dd93.jpg"
      alt="">
  </div>

推荐阅读