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>
    
  • 相关阅读:
    Shell 传递参数
    Shell 变量
    Shell 教程01
    linux yum 命令
    Linux vi/vim
    Linux 磁盘管理
    你应该知道的基础 Git 命令
    Linux 下五个顶级的开源命令行 Shell
    Fedora 23如何安装LAMP服务器
    如何在Fedora或CentOS上使用Samba共享
  • 原文地址:https://www.cnblogs.com/lovecode3000/p/13701368.html
Copyright © 2011-2022 走看看