css解决图片固定大小后拉伸的问题_css img设置了大小依然被父盒子拉变形-程序员宅基地

技术标签: css  html  

css解决图片固定大小后拉伸的问题

<div>
	<img src="/img/1.jpg" class="img" />
</div>
<style>
.img{
	object-fit:cover;
}
</style>

object-fit属性

属性 描述
fill 默认值。整个对象将完全填充此框。 如果对象的高宽比不匹配其框的宽高比,那么该对象将被拉伸以适应。
contain 整个对象在填充盒子的同时保留其长宽比,因此如果宽高比与框的宽高比不匹配,该对象将被添加“黑边”。
cover 被替换的内容大小保持其宽高比,同时填充元素的整个内容框。 如果对象的宽高比与盒子的宽高比不匹配,该对象将被剪裁以适应。
none 内容尺寸不会被改变。
scale-down 内容的尺寸就像是指定了none或contain,默认应用尺寸最小的值

注释:
1、fill: 默认值,和未设置一样。会将图片压缩拉伸
2、contain: 当宽/高的值达到父容器规定的最小宽/高时,则对应的另一个值会按照原始宽高比进行生成。例如上面,图片的高度达到父容器高度后,宽度按照比例生成,导致左右留白
3、cover: 和contain不一样,cover是以最大值为规定的。例如上图,图片的高度(较小值)首先达到父容器高度后,而宽度并未达到父容器的宽度,图片会继续’生长’,直到宽度达到和父容器宽度一致。而等比伸缩的高度会溢出,溢出部分裁剪
4、none: 顾名思义宽高对图片不起作用,即使设置了固定的宽高,图片仍然以原始大小展现,但是超出设置的值会被遮挡
5、scale-down: 以contain或none图片最小尺寸为标准.

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/Asbe_fore/article/details/121554777

智能推荐

php 获取今日、昨日、上周、本月的起始时间戳和结束时间戳的方法_php取昨天 开始 时间 结束时间-程序员宅基地

文章浏览阅读294次。php 获取今日、昨日、上周、本月的起始时间戳和结束时间戳的方法,主要使用到了 php 的时间函数 mktime。下面首先还是直奔主题以示例说明如何使用 mktime 获取今日、昨日、上周、本月的起始时间戳和结束时间戳,然后在介绍一下 mktime 函数作用和用法。01//php获取今日开始时间戳和结束时间戳0_php取昨天 开始 时间 结束时间

面试整理-Linux中必须掌握的命令_文件夹/home/interview/里面包含有关键字yunke的-程序员宅基地

文章浏览阅读269次。文章来自:http://linux.it.net.cn/e/itinterview/2018/0925/27581.html日志查看:1、查询日志中含有某个关键字的信息cat app.log |grep 'error'2、查询日志尾部最后10行的日志tail -n 10 app.log3、查询10行之后的所有日志tail -n +10 app.log 4、查询日志文件中的头..._文件夹/home/interview/里面包含有关键字yunke的

SAP S/4HANA Cloud云培训及云认证 | 易拓独家_cloud architect for sap s/4hana cloud pe-程序员宅基地

文章浏览阅读541次。借助 SAP ERP云,企业能够获取更加详细的、端到端的业务数据与分析,从而实时掌握业务运营情况,并且基于SaaS的ERP管理系统,可缓解中小企业在公司管理系统方面投入大、利用率低等问题,为企业引领业务创新,提高营收、利润和环保效益提供保障。SAP S/4 HANA主要分On-Premise(本地部署版本)和Cloud(云版本)两大版本,Cloud又分为公有云和私有云版本。SAP S/4HANA Cloud 是一款基于人工智能和分析技术的模块化 ERP 云软件,功能齐全,满足各种业务需求。_cloud architect for sap s/4hana cloud pe

【三方库】大华乐橙Demo(Android Studio版)_大华乐橙认证图片-程序员宅基地

文章浏览阅读1.2k次。大华乐橙Demo(Android Studio版)https://github.com/relish-wang/Lecheng_大华乐橙认证图片

智能车摄像头算法——车库(识别斑马线)_斑马线识别-程序员宅基地

文章浏览阅读1.3w次,点赞31次,收藏375次。车库分为出库和第一圈处理斑马线还有第二圈入库出库第一种方法比较简单,适合小白。出库,一个比较明显的特征就是比赛的开始,你可以用按键来开始打脚,配合陀螺仪积分到一定值时(也就是出库到直道上)正常巡线循迹。第二种方法首先从巡线方面需要重新寻(从最下面开始扫线,屏蔽斑马线,可以得到大约这样黑色的线(相册里面没找到图片,凑合看哈,懂意思就行)红色的是扫不到的,这种扫线方法跟八临域一个意思。这样我们就可以直接找到左右下拐点,然后开始拉线,正常循迹出库即可了。第一圈 屏蔽斑马线,正常_斑马线识别

BZOJ 3631 松鼠的新家-程序员宅基地

文章浏览阅读269次。题意: 有一棵树,n个节点,从a1出发->a2->a3->…->an,(a为一个排列),每经过一个节点时,该节点加一,问最终每个节点的值 思路: 类似差分,lca(u,v)+1,u-1,v-1,从上往下统计答案就可以了 u+1,v+1,lca(u,v)-1,fa[lca[u,v]]-1,从下往上扫描#include#include#

随便推点

java pl0 四元式,【编译原理】c++实现自下而上语法分析及中间代码(四元式)生成...-程序员宅基地

文章浏览阅读1.9k次。写在前面:本博客为本人原创,严禁任何形式的转载!本博客只允许放在博客园(.cnblogs.com),如果您在其他网站看到这篇博文,请通过下面这个唯一的合法链接转到原文!本博客全网唯一合法URL:http://www.cnblogs.com/acm-icpcer/p/9173880.html基于C++语言实现的PL/0语言的算术表达式的自下而上的语法分析程序。该语言的其他语法实现思想与此一致,故不赘..._生成四元式c++

Java知识拾遗:三大框架的技术起源【转载】-程序员宅基地

文章浏览阅读311次。Struts、Hibernate和Spring是我们Java开发中的常用关键,他们分别针对不同的应用场景给出最合适的解决方案。但你是否知道,这些知名框架最初是怎样产生的?我们知道,传统的Java Web应用程序是采用JSP+Servlet+Javabean来实现的,这种模式实现了最基本的MVC分层,使的程序结构分为几层,有负责前台展示的 JSP、负责流程逻辑控制的Servlet以及负责数据封装的J

Vb.net 调用Codesoft-LabelManager2 打印标签_vb.net打印标签-程序员宅基地

文章浏览阅读4.6k次。最近在用VB.net 做一个项目,其中一项就是标签打印,用了好多种方法,都不怎么理想,1.Zebra zpl 命令这个方法最有效,但2D条形码搞不定。希望能搞定的朋友分享一下... 还有就是同一程序用在多台打印机如果打印机分辨率不同,品牌不同都不能打印。2.Bartender开发太贵,老板让省钱...3.zebraDesigner不能在vb.net 下调用开发...最后决_vb.net打印标签

ble芯片 全称_一文看懂BLE芯片竞争格局-程序员宅基地

文章浏览阅读1.4k次。无线通信技术主要分广域网和局域网两种,差别在传输距离和通信协议方面。局域网无线通信技术包括NFC、IrDA、WIFI、蓝牙、ZigBee、Z-Wave、UWB、RFID、LiFi等,传输一般在0-300米;广域网无线通信技术包括GPRS、LoRa、NB-IoT等,有效传输距离在公里级。蓝牙是最主要的局域网(短距离)无线通信方式之一,适合覆盖距离在百米以内、数据传输量较小的通信。蓝牙实现功耗、成本、..._ble soc芯片跟纯ble

台大李宏毅《机器学习》2021课程撒花完结!除了视频、PPT,还有人汇编了一本答疑书...-程序员宅基地

文章浏览阅读530次。点击 机器学习算法与Python学习 ,选择加星标精彩内容不迷路机器之心报道今年 2 月末,「精灵宝可梦大师」李宏毅的《机器学习》最新一期课程正式开课。对于想要入门机器学习的同学来说,这是..._李宏毅ppt机器学习书

YOLOv5(ultralytics) 训练自己的数据集,VOC2007为例_ultralytics能训练sam吗-程序员宅基地

文章浏览阅读3.8k次,点赞4次,收藏40次。官方教程:https://github.com/ultralytics/yolov5/wiki/Train-Custom-DataVOC格式数据1.在yolov5目录下创建VOC2007文件夹,有VOC2007 …Annotations # 存放图片对应的xml文件 …JPEGImages # 存放图片 …ImageSets/Main #之后会在Main文件夹内自动生成train.txt,val.txt,test.txt和trainval.txt四个文件,存放训练集、验证集、测试集图片的名_ultralytics能训练sam吗

推荐文章

热门文章

相关标签