当图片比例不固定时，想要让图片自适应，一般都会用background-size:cover/contain，但是这个只适用于背景图。

  • img有个属性object-fit

    属性值：object-fit: fill / contain / cover / none / scale-down;
fill: 默认值。内容拉伸填满整个content box, 不保证保持原有的比例。

contain: 保持原有尺寸比例。长度和高度中短的那条边跟容器大小一致，长的那条等比缩放，可能会有留白。

cover: 保持原有尺寸比例。宽度和高度中长的那条边跟容器大小一致，短的那条等比缩放。可能会有部分区域不可见。

none: 保持原有尺寸比例。同时保持替换内容原始尺寸大小。

scale-down:保持原有尺寸比例,如果容器尺寸大于图片内容尺寸，保持图片的原有尺寸，不会放大失真；容器尺寸小于图片内容尺寸，用法跟contain一样。

css图片填充的几种方式的更多相关文章

  1. Python：实现图片裁剪的两种方式——Pillow和OpenCV

    原文:https://blog.csdn.net/hfutdog/article/details/82351549 在这篇文章里我们聊一下Python实现图片裁剪的两种方式,一种利用了Pillow,还 ...

  2. 关于css垂直水平居中的几种方式

    css中元素的垂直水平居中是比较常见及较常使用的,在这里向大家介绍一下几种方式. 1.水平居中 margin: 0 auto; 效果图: 而文字的垂直水平居中也比较简单,加上line-height: ...

  3. CSS控制样式的三种方式优先级对比验证

    入职已经一个月了,自此后,就好久没有写过博客了,在此先跟关注我的博友们说声抱歉.今天,在公司的一个培训作业的驱动以及伟哥那句“再不写博客就开除你”的监督下,我终于重拾旧爱,再次登录博客园,继续与大家分 ...

  4. css清除浮动的两种方式（clearfix和clear）

    最近总是在用浮动,这两种方式总是浮现在眼前,或者说去掉父级和同级浮动样式总在思考中.两种方式怎么写都在base.css中. 在做瑞祥之旅的过程中,还是吃了一个大亏,就是清除浮动,不管是同级还是父级,都 ...

  5. css清除浮动的几种方式，哪种最合适？

    细心的人可能发现了,写的导航条中存在一个问题,那就是使用了float之后,父级盒子的高度变为0了. 我们来写一个例子来看一下,创建一个父级div,并设置border属性,然后下边创建两个子元素span ...

  6. CSS颜色表示的几种方式

    在CSS中颜色有很多表示方式,今天列出一些常见的颜色表示方式及它们的用法. ①color:blue;  第一种,调用颜色属性,将颜色的英文输入在冒号后,以分号结束. 这种方法直接了当,但是能表示的颜色 ...

  7. HTML/css清除浮动的几种方式

    浮动在HTML/CSS布局中十分常见,虽然浮动布局可以实现很多有用的排版效果,但是浮动的元素脱离了文档流,可能造成包含块高度塌陷.下方行框上移等行为.因此在使用浮动实现想要的效果后,通常还需要清除浮动 ...

  8. 实现CSS等分布局的4种方式

    × 目录 [1]float [2]inline-block [3]table[4]flex 前面的话 等分布局是指子元素平均分配父元素宽度的布局方式,本文将介绍实现等分布局的4种方式 思路一: flo ...

  9. CSS清除浮动的几种方式

    浮动对页面的影响: 如果一个父盒子中有一个子盒子,并且父盒子没有设置高,子盒子在父盒子中进行了浮动,那么将来父盒子的高度为0.由于父盒子的高度为0, 下面的元素会自动补位,所以这个时候要进行浮动的清除 ...

随机推荐

  1. python Match函数

  2. jquery 回车提交事件

    $("body").keydown(function(){ if(event.keyCode == "13"){ //13是回车键的位置 } })

  3. java读取properties文件总结

    一.java读取properties文件总结 在java项目中,操作properties文件是经常要做的,因为很多的配置信息都会写在properties文件中,这里主要是总结使用getResource ...

  4. hdu4318 最短路变形

    和hdu有一题差不多.给的是损失比,1-c%就是保存了多少,找出最大的保存率即可. #include<stdio.h> #include<iostream> #include& ...

  5. javaScript之split与join的区别

    共同点: split与join函数通常都是对字符或字符串的操作: 两者的区别: split() 用于分割字符串,返回一个数组,例如 var str="How are you doing to ...

  6. KiCad Mark 点名称

    KiCad Mark 点名称 Mark 点的用处是给 IC 等高密度的元件在贴片时定位参考.

  7. python 字典创建

  8. python 列表索引

  9. HDOJ1016 Prime Ring Problem（DFS深层理解）

      Prime Ring Problem                                                                       时间限制: 200 ...

  10. mysql数据库之表和库

    SQL:语句主要用于存储数据,查询数据,更新数据和管理关系数据库系统SQL语言有IBM开发,sql语言分为中类型: 1.DDL语句 数据库定义语句:数据库,表,视图,索引,存储过程,例如create, ...