当前位置:  首页  >  前端开发  >  CSS+DIV

css如何将图片等比缩放

css将图片等比缩放的方法:可以利用object-fit属性来实现,如【object-fit:cover;】。object-fit属性指定元素的内容应该如何去适应指定容器的高度和宽度。

css将图片等比缩放的方法:可以利用object-fit属性来实现,如【object-fit: cover;】。object-fit属性指定元素的内容应该如何去适应指定容器的高度和宽度。

  • fill 默认,不保证保持原有的比例,内容拉伸填充整个内容容器。

  • contain 保持原有尺寸比例。内容被缩放。

  • cover 保持原有尺寸比例。但部分内容可能被剪切。

  • none 保留原有元素内容的长度和宽度,也就是说内容不会被重置。

  • scale-down 保持原有尺寸比例。内容的尺寸与 none 或 contain 中的一个相同,取决于它们两个之间谁得到的对象尺寸会更小一些。

  • initial 设置为默认值

  • inherit 从该元素的父元素继承属性。

举例:

对图片进行剪切,保留原始比例:

img.a {
  width: 200px;  
    height: 400px;  
    object-fit: cover;
}

吐了个 "CAO" !
扫码关注 PHP1 官方微信号
PHP1.CN | 中国最专业的PHP中文社区 | json解析格式化 | PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved PHP1.CN 第一PHP社区 版权所有