css 图片剪裁居中
列表显示图片的时候,一般设置图片宽度自适应,那么高度就会根据图片本身的宽高比等比缩放,那么问题来了,多张图片的宽高比可能本身并不相同,那么造成图片宽度一样,高度不一样,显示不好看,不协调。css属性object-fit就可以实现
实现代码:
注意:只是简单的用pc做了个demo,如果移动端都是话,单位使用rem。
img{
display:block;
width:100%;
heigth:300px;
object-fit:cover
}
object-fit属性详解
object-fit:CSS 属性指定替换元素的内容应该如何适应到其使用的高度和宽度确定的框。
object-fit:fill 被替换的内容大小可以填充元素的内容框,整个对象将完全填充此框,如果对象的宽高比不匹配其框的宽高比,你们对象会被拉伸。
object-fit:contain 被替换的内容将被缩放,以在填充元素的内容框时保持其宽高比,整个对象在填充盒子的同时保留其长宽比,因此如果宽高比与框的宽高比不匹配,该对象将被添加
object-fit:cover 被替换的内容大小保持其宽高比,同事填充元素的整个内容框,如果对象的宽高比与盒子的宽高比不匹配,改对象将被裁剪以适应。
object-fit:none 被替换的内容尺寸不会被改变
object-fit:scale-down 内容的尺寸就像是指定了none或contain,取决于哪一个将导致更小的对象尺寸。
兼容性支持:
pc:基本支持,IE不支持。
mobile:基本支持,安卓4.4.4 ie不支持
css 图片剪裁居中相关推荐
- 纯css 图片自适应居中
html 结构 <div class="container"><div class="content"></div> < ...
- html图片怎么中心对齐,css图片居中(css怎么让图片水平居中对齐)
css图片居中 css图片居平分css图片水平居中和笔直居中两种状况,有时候还需要图片同时水平笔直居中,下面分几种居中状况别离介绍. css图片水平居中 运用margin:0auto完成图片水平居中 ...
- css 剪辑图片_css实现图片剪裁
也许,你会遇到这样的情况,UI给你一张图片,然而根据实际情况,比如需要适配XXX手机,或者需要把图片形状搞好看一点,会让前端人员进行图片剪裁工作. 现在我们就已这个例子来对图片进行剪裁 html代码如 ...
- html图片上下居中的源代码,厉害了我的哥,css图片居中原来有这么多种方法
图片的居中显示css有很多方法,但在很多情况下有的方法无效,这是件很头疼的事情,比如一般设置图片属性text-align:centre水平居中,但这个方法经常无效,很多前端攻程师都有研究过或者说是搜索 ...
- html图片要上下居中显示,CSS图片垂直居中最简单的方法推荐
使用CSS实现图片垂直居中,本文提供三种方法实现CSS图片居中,其中第一种加一个标签的方法是我推荐的,代码简洁,兼容性比较好,其他的hack可能会存在问题,不建议使用.如果你对图片实现居中有更好的方法 ...
- css设置图标居左_「css图片居中」css - 常用 垂直/水平居中 + 左右布局 - seo实验室...
css图片居中 主要内容 学习文献 元素居中 胡子哥 - 谈一谈我在阿里的成长 + 2 左右布局 几种常见的CSS布局 -- 掘金 BFC 实现三栏布局的几种方法-- github 实现多列等高布局 ...
- 前端开发css中怎么让图片居中?css图片居中的方法总结
在进行网页布局的时候,有时候图片的位置可能会影响整个页面的美观程度,所以对于图片的放置位置就得变化,那么,接下来的这篇文章将给大家来介绍关于图片在网页中如何使用css实现居中的方法,对于有需要的朋友来 ...
- css图片居中不好,厉害了我的哥,css图片居中原来有这么多种方法
图片的居中显示 css 有很多方法,但在很多情况下有的方法无效,这是件很头疼的事情,比如 一般设置图片属性 text-align:center 水平居中,但这个方法经常无效,很多前端工程师都有研 ...
- css图片居中的方法总结
在进行网页布局的时候,有时候图片的位置可能会影响整个页面的美观程度,所以对于图片的放置位置就得变化,那么,接下来的这篇文章将给大家来介绍关于图片在网页中如何使用css实现居中的方法,对于有需要的朋友来 ...
最新文章
- JQuery实现倒计划按钮
- Xamarin 2017.10.9更新
- centos7 VNC-Server-6.7.2
- 使用百度地图API制作线路轨迹播放
- java高并发(十八)线程池
- 主流java框架理解
- 将unsigned char字符串以16进制的字符串显示
- 下一个最大2的幂 判断是否是2的幂
- python创建一个文本文件_利用python如何实现创建一个文本文件
- 数值计算方法第一章—数值计算引论
- veeam_backup的几种备份方式
- linux ubuntu 五笔输入法,ubuntu下安装fcitx五笔输入法
- 从excel表格读取日期利用python简单实现农历转阳历功能(1901-2099年之间)
- 双显示器如何设置上下显示和鼠标上下进入第二屏幕?
- MySQL批量修改库、表、列的排序规则
- 常用的激活函数sigmoid,relu,tanh
- 谷歌浏览器无法翻译中文解决办法
- 将CentOS/ubuntu的目录添加到windows的网络位置/将centOS目录影射为windows网络驱动器
- 高薪程序员面试题精讲系列96之分库分表了解吗?你项目中用到过吗?怎么用的?
- php校园学校教室排课系统 php毕业设计题目课题选题 php毕业设计项目作品源码(3)任何老师和班主任功能