成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

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

qieangel2013 / 796人閱讀

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

說明

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

從圖中可以看出，隨著調(diào)整瀏覽器窗口，圖片的寬高比也被破壞了，我們該怎么辦呢？我想大家應(yīng)該會想到用 background，用一個div的background來替代img元素，這樣就可以調(diào)整它的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這樣的替換元素的內(nèi)容應(yīng)該如何使用他的寬度和高度來填充其容器。

object-fit 具體有5個值：

替換元素：

其內(nèi)容不受CSS視覺格式化模型控制的元素,比如img,嵌入的文檔(iframe之類)或者applet,叫做替換元素。比：img元素的內(nèi)容通常會被其src屬性指定的圖像替換掉。替換元素通常有其固有的尺寸:一個固有的寬度,一個固有的高度和一個固有的比率。比如一幅位圖有固有用絕對單位指定的寬度和高度,從而也有固有的寬高比率。另一方面,其他文檔也可能沒有固有的尺寸,比如一個空白的html文檔。
CSS渲染模型不考慮替換元素內(nèi)容的渲染。這些替換元素的展現(xiàn)獨立于CSS。object,video,textarea,input也是替換元素,audio和canvas在某些特定情形下為替換元素。使用CSS的content屬性插入的對象是匿名替換元素。

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

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

object-position 屬性

object-position 用來控制替換內(nèi)容位置

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

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

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

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

總結(jié)

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

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/89553.html

相關(guān)文章

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

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

    mushang 評論0 收藏0

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

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

    ormsf 評論0 收藏0

  • 神經(jīng)病啊！——微信同層播放器接(踩)入(坑)總結(jié)

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

    wzyplus 評論0 收藏0

  • 神經(jīng)病??！——微信同層播放器接(踩)入(坑)總結(jié)

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

    HtmlCssJs 評論0 收藏0

發(fā)表評論

0條評論

閱讀需要支付1元查看
<