返回旧版| 微信建站| 我要建站 | 建站学习 | 加入收藏
css基础当前位置:首页 > HTML教程 > css基础 > 正文

CSS3 ------- object-fit属性

发布时间:2019-07-09 11:49:25   来源:   点击:
做项目经常会遇到图片列表展示,图片一般是用户从后台上传的,上传的图片尺寸千差万别。如果前端不控制图片大小,整个排版就会很乱,如果给定长宽,图片又会变形,用背景图片来处理有特别麻烦。这个问题一直苦恼了我好久,最近终于找到解决办法了。

css有一个object-fit属性,用来指定替换元素的内容应该如何适应到其使用的高度和宽度确定的框

1.首先是一个html结构,然后给定图片高宽然后使用object-fit:cover即可实现图片不变形而且整体排版也不受影响

  1. <img class="example" src="example.png"
  2. .example{ 
  3. width:160px; 
  4. height:90px; 
  5. object-fit:cover; 

object-fit关键属性:

object-fit:fill

被替换的内容大小可以填充元素的内容框。 整个对象将完全填充此框。 如果对象的高宽比不匹配其框的宽高比,那么该对象将被拉伸以适应。

object-fit:container

被替换的内容将被缩放,以在填充元素的内容框时保持其宽高比。 整个对象在填充盒子的同时保留其长宽比,因此如果宽高比与框的宽高比不匹配,该对象将被添加“黑边”。

object-fit:cover

被替换的内容大小保持其宽高比,同时填充元素的整个内容框。 如果对象的宽高比与盒子的宽高比不匹配,该对象将被剪裁以适应。

object-fit:none

被替换的内容尺寸不会被改变。

object-fit:scale-down

内容的尺寸就像是指定了none或contain,取决于哪一个将导致更小的对象尺寸。

object-fit​​​​​​​全局属性 
object-fit: inherit; 
object-fit: initial; 
object-fit: unset; 
---------------------
作者:Lucky_Aimee
来源:CSDN
原文:https://blog.csdn.net/qq_39364032/article/details/82287528
版权声明:本文为博主原创文章,转载请附上博文链接!
版权所有:郑州腾石网络科技有限公司 备案信息:豫ICP备18019117号
站长QQ:2863868475 业务合作咨询:15137100750(同微信)
本站所有投放的广告是有其他网站提供,不代表本站立场,同时网站首页广告位对外出租详情咨询本站站长!同时欢迎广大站长加入个人建站团队
  • 建站客服
  • CMS仿站
  • CMS学习
  • 技术交流群:336572814