object-fit

kyanag 發(fā)布于2019-08-30 11:13 / 1425人閱讀

摘要：整個對象在填充盒子的同時保留其長寬比，因此如果寬高比與框的寬高比不匹配，該對象將被添加黑邊。被替換的內(nèi)容在保持其寬高比的同時填充元素的整個內(nèi)容框。如果對象的寬高比與內(nèi)容框不相匹配，該對象將被剪裁以適應(yīng)內(nèi)容框。

object-fit CSS 屬性指定可替換元素的內(nèi)容應(yīng)該如何適應(yīng)到其使用的高度和寬度確定的框。

您可以通過使用 object-position 屬性來切換被替換元素的內(nèi)容對象在元素框內(nèi)的對齊方式

contain
被替換的內(nèi)容將被縮放，以在填充元素的內(nèi)容框時保持其寬高比。整個對象在填充盒子的同時保留其長寬比，因此如果寬高比與框的寬高比不匹配，該對象將被添加“黑邊”。
cover
被替換的內(nèi)容在保持其寬高比的同時填充元素的整個內(nèi)容框。如果對象的寬高比與內(nèi)容框不相匹配，該對象將被剪裁以適應(yīng)內(nèi)容框。
fill
被替換的內(nèi)容正好填充元素的內(nèi)容框。整個對象將完全填充此框。如果對象的寬高比與內(nèi)容框不相匹配，那么該對象將被拉伸以適應(yīng)內(nèi)容框。
none
被替換的內(nèi)容將保持其原有的尺寸。
scale-down
內(nèi)容的尺寸與 none 或 contain 中的一個相同，取決于它們兩個之間誰得到的對象尺寸會更小一些。

云服務(wù)器 GPU云服務(wù)器 object-fit

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

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

相關(guān)文章

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

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

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

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

mushang 2019-08-01 17:56 評論0 收藏0
簡單說 CSS中的 object-fit 與 object-position

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

ormsf 2019-08-29 13:45 評論0 收藏0
遇到的幾個瀏覽器兼容性問題

摘要：背景解決瀏覽器的兼容性問題是一件很煩的事情，其中并沒有太多高深的技巧，但是開發(fā)需要，也不得不去解決它，最近在開發(fā)項(xiàng)目中也遇到一些兼容性的問題，希望把這些問題的解決方式記錄下來，下次遇到就直接拿過來用，也希望對他人有一些幫助。背景解決瀏覽器的兼容性問題是一件很煩的事情，其中并沒有太多高深的技巧，但是開發(fā)需要，也不得不去解決它，最近在開發(fā)項(xiàng)目中也遇到一些兼容性的問題，希望把這些問題的解決...

JeOam 2019-08-23 12:07 評論0 收藏0
遇到的幾個瀏覽器兼容性問題

摘要：背景解決瀏覽器的兼容性問題是一件很煩的事情，其中并沒有太多高深的技巧，但是開發(fā)需要，也不得不去解決它，最近在開發(fā)項(xiàng)目中也遇到一些兼容性的問題，希望把這些問題的解決方式記錄下來，下次遇到就直接拿過來用，也希望對他人有一些幫助。背景解決瀏覽器的兼容性問題是一件很煩的事情，其中并沒有太多高深的技巧，但是開發(fā)需要，也不得不去解決它，最近在開發(fā)項(xiàng)目中也遇到一些兼容性的問題，希望把這些問題的解決...

YacaToy 2019-08-02 11:36 評論0 收藏0