鲜为人知的object-fit属性，让您的img图片不再因为固定宽高而被拉伸压缩

object-fit CSS 属性指定可替换元素的内容应该如何适应到其使用的高度和宽度确定的框。

您可以通过使用 object-position 属性来切换被替换元素（如：<iframe><video><embed><img>以及在某些情况下的<option>
<audio><canvas><object><applet>）的内容对象在元素框内的对齐方式。

object-fit 属性由下列的值中的单独一个关键字来指定。
contain
被替换的内容将被缩放，以在填充元素的内容框时保持其宽高比。整个对象在填充盒子的同时保留其长宽比，因此如果宽高比与框的宽高比不匹配，该对象将被添加“黑边”。
cover
被替换的内容在保持其宽高比的同时填充元素的整个内容框。如果对象的宽高比与内容框不相匹配，该对象将被剪裁以适应内容框。
fill
被替换的内容正好填充元素的内容框。整个对象将完全填充此框。如果对象的宽高比与内容框不相匹配，那么该对象将被拉伸以适应内容框。
none
被替换的内容将保持其原有的尺寸。
scale-down
内容的尺寸与 none 或 contain 中的一个相同，取决于它们两个之间谁得到的对象尺寸会更小一些。

fill | contain | cover | none | scale-down

demo:

<div><h2>object-fit: fill</h2><img src="https://mdn.mozillademos.org/files/6457/mdn_logo_only_color.png" alt="MDN Logo" class="fill"/><img src="https://mdn.mozillademos.org/files/6457/mdn_logo_only_color.png" alt="MDN Logo" class="fill narrow"/><h2>object-fit: contain</h2><img src="https://mdn.mozillademos.org/files/6457/mdn_logo_only_color.png" alt="MDN Logo" class="contain"/><img src="https://mdn.mozillademos.org/files/6457/mdn_logo_only_color.png" alt="MDN Logo" class="contain narrow"/><h2>object-fit: cover</h2><img src="https://mdn.mozillademos.org/files/6457/mdn_logo_only_color.png" alt="MDN Logo" class="cover"/><img src="https://mdn.mozillademos.org/files/6457/mdn_logo_only_color.png" alt="MDN Logo" class="cover narrow"/><h2>object-fit: none</h2><img src="https://mdn.mozillademos.org/files/6457/mdn_logo_only_color.png" alt="MDN Logo" class="none"/><img src="https://mdn.mozillademos.org/files/6457/mdn_logo_only_color.png" alt="MDN Logo" class="none narrow"/><h2>object-fit: scale-down</h2><img src="https://mdn.mozillademos.org/files/6457/mdn_logo_only_color.png" alt="MDN Logo" class="scale-down"/><img src="https://mdn.mozillademos.org/files/6457/mdn_logo_only_color.png" alt="MDN Logo" class="scale-down narrow"/></div>
<style>
h2 {font-family: Courier New, monospace;font-size: 1em;margin: 1em 0 0.3em;
}div {display: flex;flex-direction: column;flex-wrap: wrap;align-items: flex-start;height: 940px;
}img {width: 150px;height: 100px;border: 1px solid #000;
}.narrow {width: 100px;height: 150px;margin-top: 10px;
}.fill {object-fit: fill;
}.contain {object-fit: contain;
}.cover {object-fit: cover;
}.none {object-fit: none;
}.scale-down {object-fit: scale-down;
}
</style>

【扩展阅读】其他与图像相关的CSS属性: object-position, image-orientation, image-rendering, image-resolution。

鲜为人知的object-fit属性，让您的img图片不再因为固定宽高而被拉伸压缩相关推荐

小程序中image标签的mode属性，防止图片调整宽高而导致拉伸的问题
微信小程序中图片直接调整宽高很容易导致图片拉伸变形,达不到预期效果 mode = "widthFix" (按图片高度自适应) 或 mode="aspectFill&quo ...
【Android 内存优化】自定义组件长图组件 ( 获取图像宽高 | 计算解码区域 | 设置图像解码属性复用像素格式 | 图像绘制 )
文章目录一.获取图像真实宽高二.计算解码区域三.设置解码参数内存复用像素格式四.图像绘制五.执行效果六.源码及资源下载官方文档 API : BitmapRegionDecoder 在 ...
【进阶版九宫格背景图片】如何仅仅依靠background的几个属性组合搭配出酷炫的背景图片效果，并自适应任何宽高效果？
如果你要有透明度效果的背景图请移步https://blog.csdn.net/qq_37860634/article/details/119591991 这是我们最终想要达到的效果,并且支持任意宽高缩 ...
java设计一个立方体类box_实例1: 设计一个立方体类Box,定义三个属性,分别是长,宽,高。定义二个方法,分别计算并输出立方体的体积和表面积。_学小易找答案...
[填空题]表达式 list(filter(lambda x:x>2, [0,1,2,3,0,0])) 的值为 _________ . [填空题]表达式 len(' 中国 '.encode('ut ...
如何删除计算机桌面多余的大e,教你删除属性里桌面多余背景图片
教你删除属性里桌面多余背景图片方法一:找到存放图片的地址,直接删除. 一般电脑桌面背景图片分别在五个地方保存. 1)在C:\WINDOWS文件夹里面有十几个BMP格式的图像文件,是系统自带的那几个布 ...
css禁止背景图拉伸_css3 background 新添属性让你的背景图不再拉伸而是随窗口变化而变化...
传统的页面制作中,当你遇到css2 的时候,如何来显示一张背景图呢?拉伸 (无节操的拉伸,容器长宽完全超出背景图的长宽) 重复展示(用无数张同样的图片来铺满容器的背景面积) x轴 /y轴重复展示(纵 ...
【 CSS 尺寸/宽高属性 heightwidth 】
CSS 尺寸/宽高属性 height&width CSS 尺寸/宽高属性 1. height 属性: 设置元素的高度 (auto/长度值/ 百分比值) 1.1 max-height 属性 ...
css限制图片高宽,CSS限定图片宽高在范围内等比缩放（img缺省宽高属性）
this.p={ m:2, b:2, loftPermalink:'', id:'fks_0870650860840870700840950850640720870830750840840850660 ...
object标签属性详解
最近在做视频直播这一块的,html5的video不能实现此功能,在网上查找了资料,觉得很有用. 一.介绍:我们要在网页中正常显示flash内容,那么页面中必须要有指定flash路径的标签.也就是OBJ ...

鲜为人知的object-fit属性，让您的img图片不再因为固定宽高而被拉伸压缩

鲜为人知的object-fit属性，让您的img图片不再因为固定宽高而被拉伸压缩相关推荐

最新文章

热门文章