4688888凤凰天机开奖,小鱼儿站玄机二站论坛,新澳门三中三码精准100%,澳门一码一肖100准吗,白小姐三肖三码期期准免2024

您的位置：首页 > 新闻

CSS object-fit 属性【xìng】,object的用法用法及【jí】效果

新闻 2024-9-22编辑：深圳网站建设阅读（）标签： css 图片

object-fit 属性指定【dìng】元素的【de】内容应该如何【hé】去适应【yīng】指【zhǐ】定容器的高度与宽度。

object-fit 一【yī】般【bān】用【yòng】于 img 和 video 标签，一般可以对这【zhè】些元【yuán】素进行保留原始比例的剪切、缩放或者直接【jiē】进【jìn】行【háng】拉伸等。

您可以通过使用 object-position 属【shǔ】性来切换被【bèi】替换元素的【de】内容对象【xiàng】在元素框内【nèi】的对齐方式【shì】。

<style>
.fill {object-fit: fill;}
.contain {object-fit: contain;}
.cover {object-fit: cover;}
.scale-down {object-fit: scale-down;}
.none {object-fit: none;}
</style>
或
img style="object-fit: cover;" alt=" " src="/230919/n4SSBGJr.jpg">

fill 默认，不保证保持原有的比例，内容拉伸填充整个内容容器。
contain 保持原有尺寸比例。内容被缩放。
cover 保持原有尺寸比例。但部分内容可能被剪切。
none 保留原有元【yuán】素【sù】内容的长度和【hé】宽度，也就是说【shuō】内容【róng】不会被重【chóng】置。
scale-down 保持【chí】原【yuán】有尺寸比例。内容的尺寸与【yǔ】 none 或 contain 中【zhōng】的一个相同，取决于它们两个之【zhī】间谁得到的对【duì】象尺寸会【huì】更小一【yī】些。
initial 设置为默认值，关于 initial
inherit 从该元素的父元素继承属性。