資訊專欄INFORMATION COLUMN
摘要：比如一幅位圖有固有用絕對(duì)單位指定的寬度和高度從而也有固有的寬高比率。另一方面其他文檔也可能沒有固有的尺寸比如一個(gè)空白的文檔。渲染模型不考慮替換元素內(nèi)容的渲染。也是替換元素和在某些特定情形下為替換元素。使用的屬性插入的對(duì)象是匿名替換元素。
說明
問題：
一個(gè)div寬度不固定，高度固定，采用Flex布局，它里面有兩個(gè)元素一個(gè)img寬度占40%，高度占100%，一個(gè)p元素，寬度占60%，高度占100%，調(diào)整瀏覽器窗口大小，要保證，img元素不變形，寬高比不變，怎么辦！
從圖中可以看出，隨著調(diào)整瀏覽器窗口，圖片的寬高比也被破壞了，我們?cè)撛趺崔k呢？我想大家應(yīng)該會(huì)想到用 background，用一個(gè)div的background來替代img元素，這樣就可以調(diào)整它的background-size 和 background-position，就能保證圖片不變形，寬高比不變了，但是其實(shí)不用這么麻煩，我們直接用 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 這兩個(gè)屬性
解釋object-fit 屬性
這個(gè)屬性決定了像img和videos這樣的替換元素的內(nèi)容應(yīng)該如何使用他的寬度和高度來填充其容器。
object-fit 具體有5個(gè)值：
替換元素：
其內(nèi)容不受CSS視覺格式化模型控制的元素,比如img,嵌入的文檔(iframe之類)或者applet,叫做替換元素。比：img元素的內(nèi)容通常會(huì)被其src屬性指定的圖像替換掉。替換元素通常有其固有的尺寸:一個(gè)固有的寬度,一個(gè)固有的高度和一個(gè)固有的比率。比如一幅位圖有固有用絕對(duì)單位指定的寬度和高度,從而也有固有的寬高比率。另一方面,其他文檔也可能沒有固有的尺寸,比如一個(gè)空白的html文檔。CSS渲染模型不考慮替換元素內(nèi)容的渲染。這些替換元素的展現(xiàn)獨(dú)立于CSS。object,video,textarea,input也是替換元素,audio和canvas在某些特定情形下為替換元素。使用CSS的content屬性插入的對(duì)象是匿名替換元素。
我們來看看，每個(gè)屬性值，起作用的樣子
因?yàn)閟cal-down 就是 none和contain之間進(jìn)行選擇，選擇的是尺寸比較小的那個(gè) ，所以它是始終能保證替換元素完整顯示的，并且它顯示的最大尺寸就是圖片實(shí)際尺寸。
object-position 屬性
object-position 用來控制替換內(nèi)容位置
語(yǔ)法：
object-position:x軸距離 y軸距離;
object-position屬性定義時(shí)可以用像素，也可以用百分比，也可以用關(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、如果僅指定了一個(gè)值，其他值將是50％
這兩個(gè)屬性，主要是解決在布局時(shí)遇到的 尺寸 和 寬高比問題，說簡(jiǎn)單點(diǎn)就是處理圖片會(huì)變形的問題，而object-position默認(rèn)值是 50% 50% ，就是居中的意思，也可以用這兩個(gè)屬性來做 替換元素 的內(nèi)容的水平垂直居中。
文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址：http://specialneedsforspecialkids.com/yun/89553.html
摘要：比如一幅位圖有固有用絕對(duì)單位指定的寬度和高度從而也有固有的寬高比率。另一方面其他文檔也可能沒有固有的尺寸比如一個(gè)空白的文檔。渲染模型不考慮替換元素內(nèi)容的渲染。也是替換元素和在某些特定情形下為替換元素。使用的屬性插入的對(duì)象是匿名替換元素。 說明 問題： 一個(gè)div寬度不固定，高度固定，采用Flex布局，它里面有兩個(gè)元素一個(gè)img寬度占40%，高度占100%，一個(gè)p元素，寬度占60%，...
摘要：比如一幅位圖有固有用絕對(duì)單位指定的寬度和高度從而也有固有的寬高比率。另一方面其他文檔也可能沒有固有的尺寸比如一個(gè)空白的文檔。渲染模型不考慮替換元素內(nèi)容的渲染。也是替換元素和在某些特定情形下為替換元素。使用的屬性插入的對(duì)象是匿名替換元素。 說明 問題： 一個(gè)div寬度不固定，高度固定，采用Flex布局，它里面有兩個(gè)元素一個(gè)img寬度占40%，高度占100%，一個(gè)p元素，寬度占60%，...
摘要：估計(jì)踩過微信視頻這個(gè)坑的，內(nèi)心都想說上一句神經(jīng)病啊而微信也終于出了個(gè)同層播放器接入規(guī)范，算是正常點(diǎn)了好了閑話不說，下邊進(jìn)入正題標(biāo)簽里的內(nèi)聯(lián)播放相關(guān)屬性微信在標(biāo)簽上新增了一些的私有屬性，分別是啟用同層播放。 估計(jì)踩過微信視頻這個(gè)坑的，內(nèi)心都想說上一句： 神經(jīng)病??！ 而微信也終于出了個(gè)《H5同層播放器接入規(guī)范》，算是正常點(diǎn)了……好了閑話不說，下邊進(jìn)入正題： 1. 標(biāo)簽里的內(nèi)聯(lián)播放相關(guān)屬性...
摘要：估計(jì)踩過微信視頻這個(gè)坑的，內(nèi)心都想說上一句神經(jīng)病啊而微信也終于出了個(gè)同層播放器接入規(guī)范，算是正常點(diǎn)了好了閑話不說，下邊進(jìn)入正題標(biāo)簽里的內(nèi)聯(lián)播放相關(guān)屬性微信在標(biāo)簽上新增了一些的私有屬性，分別是啟用同層播放。 估計(jì)踩過微信視頻這個(gè)坑的，內(nèi)心都想說上一句： 神經(jīng)病??！ 而微信也終于出了個(gè)《H5同層播放器接入規(guī)范》，算是正常點(diǎn)了……好了閑話不說，下邊進(jìn)入正題： 1. 標(biāo)簽里的內(nèi)聯(lián)播放相關(guān)屬性...
閱讀 3752·2021-08-11 11:16
閱讀 1621·2019-08-30 15:44
閱讀 1995·2019-08-29 18:45
閱讀 2267·2019-08-26 18:18
閱讀 996·2019-08-26 13:37
閱讀 1565·2019-08-26 11:43
閱讀 2109·2019-08-26 11:34
閱讀 372·2019-08-26 10:59
