zoukankan      html  css  js  c++  java
  • 已知父级盒子的宽高,子级img宽高未知,想让img铺满父级盒子且图片不能变形

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

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

      <style>
        .box {
           200px;
          height: 200px;
        }
        img {
          object-fit: cover;
           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>
    
  • 相关阅读:
    无题
    无题
    Windows NT 和 VMS: 其余的故事 (The Rest of the Story)
    Lachesis Shield Released!
    最近几年来看到的最强的照片
    有关 Nintendo GameCube
    那些带给我欢乐的游戏
    习惯了 .#
    Rootkits
    我写的IDA插件发布了
  • 原文地址:https://www.cnblogs.com/lovecode3000/p/13701368.html
Copyright © 2011-2022 走看看