css image自適應寬高

2021-08-09 16:46:32 字數 819 閱讀 3219

width: 100%;

height: 100%;

object-fit: cover;

/* 關鍵屬性 */

object-fit

: fill;

object-fit

: contain;

object-fit

: cover;

object-fit

: none;

object-fit

: scale-down;

/* 全域性屬性 */

object-fit

: inherit;

object-fit

: initial;

object-fit

: unset;

fill被替換的內容的大小,以填補該元素的內容框:物件的具體物件的大小是元素的使用寬度和高度。

contain被替換的內容的大小,為自身寬高比不變,適應該元素的內容框的大小:它的具體物件的大小被解析為對元素的使用寬度和高度的含有約束。

cover被替換的內容的尺寸卻使元件的整個內容框,以保持其長寬比其具體的物件的大小被解析為針對元素的使用的寬度和高度的蓋約束。

none被替換的內容的尺寸卻使元件的整個內容框,以保持其長寬比其具體的物件的大小被解析為針對元素的使用的寬度和高度的蓋約束。

scale-down內容的尺寸彷彿nonecontain指定了,取將導致更小的具體物件的大小。

寬高自適應

網頁布局中經常要定義元素的寬和高。但是很多時候我們希望元素的大小能夠根據視窗或子元素自動調整,這就是自適應 元素自適應在網頁布局中非常重要,他能夠使網頁顯示更加靈活,可以適應在不同裝置 不同視窗和不同解析度下顯示 1.寬度自適應 元素寬度設定為100 塊元素寬度預設為100 2.元素具備最小高度的自...

寬高自適應

寬高自適應 靈活 網頁布局中經常要定義元素的寬和高。但很多時候我們希望元素的大小能夠根據視窗或子元素自動調整,這就是pc自適應。自適應的優點 元素自適應在網頁布局中非常重要,它能夠使網頁顯示更靈活,可以適應在不同裝置 不同視窗和不同解析度下顯示。一 相對視窗和父元素的自適應寫法 寬度 width 1...

寬高自適應

寬高自適應可以使得網頁更加靈活,適應在不同的裝置不同解析度下。一 pc端寬高自適應 相對視窗或者父元素的自適應情況 寬度自適應 width 100 預設情況下,不新增定位時 寬度自適應的比例,是參照父元素的寬度進行顯示的,也就是說,如果元素的父元素是整個頁面的話,顯示的時候就是鋪滿整個螢幕 如果當父...