css屬性挖掘 object fit

2022-09-04 23:54:28 字數 687 閱讀 4131

object-fit屬性指定元素的內容應該如何去適應指定容器的高度和寬度。

一般用於img和video標籤,一般可以對這些元素進行保留原始比例的剪下、縮放或者直接進行拉伸等。

.fill 

.contain

.cover

.none

.scale-down

fill

預設,不保證保持原有的比例,內容拉伸填充整個內容容器。

contain

保持原有尺寸比例。內容被縮放。

【保證尺寸一定可以再容器裡面放得下,因此,此引數可能會在容器內留下空白。】

cover

保持原有尺寸比例。但內容可能被裁剪。

【保證尺寸一定大於容器尺寸,寬度和高度至少有乙個和容器一致,因此,此引數可能會讓的部分區域不可見。】

none

保持原有元素內容的長度和寬度,也就是說內容不會被重置。

scale-down    

保持原有尺寸比例。內容的尺寸與none與contain中的乙個相同,取決於他們兩個之間誰得到的物件尺寸會更小一些。

initial

設定為預設值。

inherit

從該元素的父元素繼承屬性。

css 筆記 css 屬性

以下內容大部分來自 文字字型 匹配原則 泛型字型 文字大小 n 取值 文字效果 文字粗細 說明 設定英文大小寫轉換屬性 字型屬性 字型顏色 返回目錄 水平對齊方式 垂直對齊 文字效果 首行縮排 文字轉換 單詞之間間隔 字元之間間距 壓縮空白屬性 行距 設定標註文字水平對齊方式 設定標註文字顯示的位置...

CSS屬性 背景屬性 or 浮動屬性

background color red background image url background repeat no repeat repeat repeat x repeat y background position 水平位置 垂直位置 可以給負值 background attachme...

css文字屬性 文字轉換(CSS屬性)

css文字屬性 text transform 文字轉換 繼承 this property controls if and how an element s text content is capitalized.此屬性控制是否以及如何大寫元素的文字內容。these style rules makeh...