淺談CSS中的 object-fit 與 object-position的使用

發(fā)布時間：2017-11-06 15:12:41 作者：FEWY

我要評論

這篇文章主要介紹了淺談CSS中的 object-fit 與 object-position的使用,詳細(xì)的介紹了object-fit 與 object-position的屬性和使用，具有一定的參考價值，有興趣的可以了解一下

本文介紹了CSS中的 object-fit 與 object-position的使用，分享給大家，具體如下：

說明

問題：

一個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 就可以了。

效果圖：

代碼：

<!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 默認(rèn)就是 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 的情況。

好的，問題解決了，我們來具體看看 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之間進(jìn)行選擇，選擇的是尺寸比較小的那個，所以它是始終能保證替換元素完整顯示的，并且它顯示的最大尺寸就是圖片實際尺寸。

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)容的水平垂直居中。

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。