簡單說 CSS中的 object-fit 與 object-position

ormsf 發布于2019-08-29 13:45 / 752人閱讀

摘要：比如一幅位圖有固有用絕對單位指定的寬度和高度從而也有固有的寬高比率。另一方面其他文檔也可能沒有固有的尺寸比如一個空白的文檔。渲染模型不考慮替換元素內容的渲染。也是替換元素和在某些特定情形下為替換元素。使用的屬性插入的對象是匿名替換元素。

說明

問題：
一個div寬度不固定，高度固定，采用Flex布局，它里面有兩個元素一個img寬度占40%，高度占100%，一個p元素，寬度占60%，高度占100%，調整瀏覽器窗口大小，要保證，img元素不變形，寬高比不變，怎么辦！

從圖中可以看出，隨著調整瀏覽器窗口，圖片的寬高比也被破壞了，我們該怎么辦呢？我想大家應該會想到用 background，用一個div的background來替代img元素，這樣就可以調整它的background-size 和 background-position，就能保證圖片不變形，寬高比不變了，但是其實不用這么麻煩，我們直接用 object-fit 與 object-position 就可以了。

效果圖：

代碼：





     
    



    
        
        Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

上面是object-fit取值為 none 的情況，我們看看object-fit取值為 contain 的情況。

好的，問題解決了，我們來具體看看 object-fit 與 object-position 這兩個屬性

解釋

object-fit 屬性

這個屬性決定了像img和videos這樣的替換元素的內容應該如何使用他的寬度和高度來填充其容器。

object-fit 具體有5個值：

替換元素：

其內容不受CSS視覺格式化模型控制的元素,比如img,嵌入的文檔(iframe之類)或者applet,叫做替換元素。比：img元素的內容通常會被其src屬性指定的圖像替換掉。替換元素通常有其固有的尺寸:一個固有的寬度,一個固有的高度和一個固有的比率。比如一幅位圖有固有用絕對單位指定的寬度和高度,從而也有固有的寬高比率。另一方面,其他文檔也可能沒有固有的尺寸,比如一個空白的html文檔。

CSS渲染模型不考慮替換元素內容的渲染。這些替換元素的展現獨立于CSS。object,video,textarea,input也是替換元素,audio和canvas在某些特定情形下為替換元素。使用CSS的content屬性插入的對象是匿名替換元素。

我們來看看，每個屬性值，起作用的樣子

因為scal-down 就是 none和contain之間進行選擇，選擇的是尺寸比較小的那個，所以它是始終能保證替換元素完整顯示的，并且它顯示的最大尺寸就是圖片實際尺寸。

object-position 屬性

object-position 用來控制替換內容位置

語法：
object-position:x軸距離 y軸距離;

object-position屬性定義時可以用像素，也可以用百分比，也可以用關鍵字。例如，object-position: 10px 10px 是左上角各空出10px，object-position: 100% 100%是右下角，object-position: center 是中間和 object-position: 50% 50% 效果一樣。

我們來看看各種取值的效果

注意：
1、object-position屬性與background-position很相似，其取值和background-position屬性取值一樣，但是它的默認值是50% 50%， background-position的默認值是0% 0%
2、如果僅指定了一個值，其他值將是50％

總結

這兩個屬性，主要是解決在布局時遇到的尺寸和寬高比問題，說簡單點就是處理圖片會變形的問題，而object-position默認值是 50% 50% ，就是居中的意思，也可以用這兩個屬性來做替換元素的內容的水平垂直居中。

GPU云服務器云服務器 css簡單簡單css object-fit css與html

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/112689.html

簡單說 CSS中的 object-fit 與 object-position

摘要：比如一幅位圖有固有用絕對單位指定的寬度和高度從而也有固有的寬高比率。另一方面其他文檔也可能沒有固有的尺寸比如一個空白的文檔。渲染模型不考慮替換元素內容的渲染。也是替換元素和在某些特定情形下為替換元素。使用的屬性插入的對象是匿名替換元素。說明問題：一個div寬度不固定，高度固定，采用Flex布局，它里面有兩個元素一個img寬度占40%，高度占100%，一個p元素，寬度占60%，...

qieangel2013 2019-08-21 17:28 評論0 收藏0
簡單說 CSS中的 object-fit 與 object-position

摘要：比如一幅位圖有固有用絕對單位指定的寬度和高度從而也有固有的寬高比率。另一方面其他文檔也可能沒有固有的尺寸比如一個空白的文檔。渲染模型不考慮替換元素內容的渲染。也是替換元素和在某些特定情形下為替換元素。使用的屬性插入的對象是匿名替換元素。說明問題：一個div寬度不固定，高度固定，采用Flex布局，它里面有兩個元素一個img寬度占40%，高度占100%，一個p元素，寬度占60%，...

mushang 2019-08-01 17:56 評論0 收藏0
神經病啊！——微信同層播放器接(踩)入(坑)總結

摘要：估計踩過微信視頻這個坑的，內心都想說上一句神經病啊而微信也終于出了個同層播放器接入規范，算是正常點了好了閑話不說，下邊進入正題標簽里的內聯播放相關屬性微信在標簽上新增了一些的私有屬性，分別是啟用同層播放。估計踩過微信視頻這個坑的，內心都想說上一句：神經病啊！而微信也終于出了個《H5同層播放器接入規范》，算是正常點了……好了閑話不說，下邊進入正題： 1. 標簽里的內聯播放相關屬性...

wzyplus 2019-08-29 12:17 評論0 收藏0
神經病啊！——微信同層播放器接(踩)入(坑)總結

摘要：估計踩過微信視頻這個坑的，內心都想說上一句神經病啊而微信也終于出了個同層播放器接入規范，算是正常點了好了閑話不說，下邊進入正題標簽里的內聯播放相關屬性微信在標簽上新增了一些的私有屬性，分別是啟用同層播放。估計踩過微信視頻這個坑的，內心都想說上一句：神經病啊！而微信也終于出了個《H5同層播放器接入規范》，算是正常點了……好了閑話不說，下邊進入正題： 1. 標簽里的內聯播放相關屬性...

HtmlCssJs 2019-08-20 15:17 評論0 收藏0