img標籤實現和背景圖同樣的顯示效果——object-fit和object-position

時間 2019-11-25

標籤 img 標籤實現背景同樣顯示效果 object fit position 欄目 HTML 简体版

原文原文鏈接

不知你們在作前端頁面的時候，有沒有遇到相似這樣的問題：有一個不是正方形的圖片，多是寬度大於高度的，也多是高度大於寬度的，而你又並不想用背景圖的方式來作，要實現用img標籤來讓此圖片顯示出一個正方形的且不變形的效果。即以下圖：只顯示圖片中間部分（紅框部分）css

下面咱們便來簡單討論如何實現讓長方形圖片顯示出正方形的效果，首先咱們本次討論中用到的兩張圖片的原圖就是上面的兩張圖片（一張寬度大於高度，另外一張高度大於寬度）html

一、背景圖顯示正方形效果的作法

首先仍是從背景圖的作法提及，遇到相似的問題，咱們大部分人首先想到的是，能用背景圖片作的話，就直接用背景圖片來作了，至少我是這麼想的。那麼用背景圖的方式是怎麼作的，代碼仍是寫一下以下：前端

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>背景圖的作法</title>
    <style>
        .bg-img1 {
            width: 200px;
            height: 200px;
            background: url("images/img1.jpg") center;
            background-size: contain;
        }
        .bg-img2 {
            width: 200px;
            height: 200px;
            background: url("images/img2.jpg") center;
            background-size: cover;
        }
    </style>
</head>
<body>
    <h3>背景圖的作法</h3>
    <div class="bg-img1"></div>
    <br>
    <div class="bg-img2"></div>

</body>
</html>

頁面效果以下圖：
css3

固然：背景圖還能夠實現不少其餘效果，只須要background-size屬性使用不一樣的值就能夠實現不一樣的效果，例如：cover，contain，這裏就再也不一一贅述，由於咱們重點要說的是關於img標籤顯示圖片的問題。wordpress

二、img標籤顯示正方形效果的作法

首先、也是須要設置img標籤的寬度和高度是一致的，另外須要用到一個關鍵的css屬性——object-fit:cover。下面仍是直接貼出代碼:測試

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>img標籤的作法</title>
    <style>
        .img-1 {
            width: 200px;
            height: 200px;
            object-fit: cover;
        }
        .img-2 {
            width: 200px;
            height: 200px;
            object-fit: cover;
        }
    </style>
</head>
<body>
<h3>img標籤的作法</h3>
<img src="images/img1.jpg" class="img-1">
<br>
<img src="images/img2.jpg" class="img-2">
</body>
</html>

效果以下圖：阿里雲

至此，已經實現了咱們開頭說的需求。url

三、object-fit的其它值

那麼object-fit屬性還有哪些值呢？
　　object-fit: fill;
　　object-fit: contain;
　　object-fit: cover;
　　object-fit: none;
　　object-fit: scale-down;

fill: 中文釋義「填充」。默認值。替換內容拉伸填滿整個contentbox,不保證保持原有的比例。
contain: 中文釋義「包含」。保持原有尺寸比例。保證替換內容尺寸必定能夠在容器裏面放得下。所以，此參數可能會在容器內留下空白。
cover: 中文釋義「覆蓋」。保持原有尺寸比例。保證替換內容尺寸必定大於容器尺寸，寬度和高度至少有一個和容器一致。所以，此參數可能會讓替換內容（如圖片）部分區域不可見（上面講解的例子就是如此）。
none: 中文釋義「無」。保持原有尺寸比例。同時保持替換內容原始尺寸大小。
scale-down: 中文釋義「下降」。就好像依次設置了none或contain, 最終呈現的是尺寸比較小的那個。

下面咱們來測試一下每個屬性值顯示的效果，爲了更明顯的看出區別，咱們換另一張圖片。
每一個img標籤都設置的 width:200px 和 width:200px，再加上設置的object-fit屬性的不一樣值，效果圖以下：
spa

四、object-position屬性

object-position要比object-fit單純的多，就是控制圖片在盒子中顯示位置的。默認值是50% 50%，也就是居中效果，因此，不管上一節object-fit值爲那般，圖片都是水平垂直居中的。所以，下次要實現尺寸大小不固定圖片的垂直居中效果，能夠試試object-fit.

與background-position相似，object-position的值類型爲<position>類型值。也就是說，CSS3的相對座標設定樣式支持的。
這裏就再也不代碼實驗了，本身能夠動手試試。

注：目前IE應該還不支持object-fit和object-position屬性

本博客根據閱讀了張鑫旭的一篇博客後，本身動手實驗後寫的，張鑫旭的這篇博客地址是：http://www.zhangxinxu.com/wordpress/2015/03/css3-object-position-object-fit/3d

須要購買阿里雲產品和服務的，點擊此連接領取優惠券紅包，優惠購買哦，領取後一個月內有效： https://promotion.aliyun.com/ntms/yunparter/invite.html?userCode=fp9ccf07

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。