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

時間 2019-11-08

標籤簡單 css object fit position 欄目 CSS 简体版

原文原文鏈接

說明

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

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

效果圖：canvas

代碼：瀏覽器

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8"> 
    <style type="text/css">
    div{
        height: 300px;
        border: 1px solid red;
        display: flex;
    }

    img {
        width: 40%;
        height: 100%;

        /*只是增長下面兩行就能夠了*/
        object-fit: none;
        object-position: center;  /*這行均可以不寫，object-position 默認就是 center*/
    }

    p{
        width: 60%;
        height: 100%;
        background: blue;
        margin: 0;
        overflow: hidden;
    }
    </style>
</head>

<body>
    <div>
        <img src="http://img.blog.csdn.net/20171016170931485">
        <p>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.</p>
    </div>
</body>

</html>

上面是object-fit取值爲 none 的狀況，咱們看看object-fit取值爲 contain 的狀況。
app

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

解釋

object-fit 屬性佈局

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

object-fit 具體有5個值：flex

替換元素：ui

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

咱們來看看，每一個屬性值，起做用的樣子

由於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% 效果同樣。

咱們來看看各類取值的效果