首页 > 其他分享 >CSS object-fit 属性

CSS object-fit 属性

时间:2022-12-15 15:22:34浏览次数:72  
标签:object fit img 元素 CSS 属性

标签定义及使用说明

object-fit 属性指定元素的内容应该如何去适应指定容器的高度与宽度。

object-fit 一般用于 img 和 video 标签,一般可以对这些元素进行保留原始比例的剪切、缩放或者直接进行拉伸等。

您可以通过使用 object-position 属性来切换被替换元素的内容对象在元素框内的对齐方式

img {
  width: 200px;
  height: 400px;
  object-fit: cover;
}
object-fit: fill|contain|cover|scale-down|none|initial|inherit;

 

标签:object,fit,img,元素,CSS,属性
From: https://www.cnblogs.com/heibaiqi/p/16985106.html

相关文章

  • Java Object
    jdk提供的一个类,是所有类的父类,再java.lang中Object类中定义了很多方法hashcode():返回对象的散列码toString():以字符串的形式返回某个类的实例化对象的信息getClass()......
  • 'bool' object is not callable
    报错:'bool'objectisnotcallable原因:is_authenticated是属性而不是方法解决:把括号去掉就可以了demo:classA():def__init__(self,x):self.x=x......
  • ArcObject SDK开发 015 出图
    1、核心出图代码出图主要是靠IExport接口,继承该接口的类如下图所示。出不同格式的图,实例化不同的类即可。例如导出jpg格式的图片的代码如下。privatevoidExport(str......
  • CSS clip-path 属性
    属性定义及使用说明clip-path属性使用裁剪方式创建元素的可显示区域。区域内的部分显示,区域外的隐藏。可以指定一些特定形状。注意: clip-path属性将替换已弃用的clip......
  • CSS pointer-events 属性
    pointer-events属性用于设置元素是否对鼠标事件做出反应。CSS语法pointer-events:auto|none;属性值属性值描述auto默认值,设置该属性链接可以正常点击访问。......
  • CSS变量
    /*全局变量保存的地方*/:root{--main-bg-color:red;/*变量名必须以--开头*/}var(custom-property-name,value)值描述custom-property-name必需。自定......
  • CSS伪类三角形
    <!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metahttp-equiv="X-UA-Compatible"content="IE=edge"><metaname="viewport"content="widt......
  • [Typescript] 137. Hard - Discriminated union to Object
    import{Equal,Expect}from"../helpers/type-utils";typeRoute=|{route:"/";search:{page:string;perPage:string;......
  • [Typescript] 136. Medium - Object to Union
    import{Equal,Expect}from"../helpers/type-utils";interfaceAttributes{id:string;email:string;username:string;}/***Howdowecreatea......
  • CSS-3D动画 webpack-logo
    <!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metahttp-equiv="X-UA-Compatible"content="IE=edge"><metaname="viewport"content=......