如何從中心顯示圖片，小框架大圖片

我們在頁面中有一個很長的框架（大約3.5：1寬度到高度）。大部分照片顯示的是4：3，較大和不正確的縱橫比的框架。如何從中心顯示圖片，小框架大圖片

客戶真正想要長幀，而不是計劃到目前爲止改變幀大小。

目前，它顯示的方式是「寬度調整爲框架寬度，然後從照片頂部填充到框架底部」。通過這種方式，幾乎一半的照片是從下面切下來的，看起來非常糟糕。

我知道在不破壞照片的情況下幾乎不可能適合寬度和高度。

所以我的計劃是嘗試顯示中心的部分照片。

我該怎麼寫這個CSS？

注：「幀」這裏是一個「格」

來源

2016-11-16 Benny Ae

你可以設置圖像作爲背景圖像的幀和做background-size：cove R等background-position：center;背景重複：不重複？這將縮放背景以適合整個框架並居中，就像您在第二張圖像中一樣。 – Santi

「框架」是什麼元素？分享你的標記對你有幫助。 – BenM

對不起，「框架」是一個div。 –

一種選擇是使用position和transform到中心框架上的IMG，同時保持比例與填充這樣的：

.framed { 
 
    position: relative; 
 
    width: 100%; 
 
    /*Proportion 3.5:1 with the padding*/ 
 
    padding-top: 28.5%; 
 
    overflow:hidden; 
 
} 
 
.framed img { 
 
    width: 100%; 
 
    position: absolute; 
 
    top: 50%; 
 
    transform: translateY(-50%); 
 
}

<h5>Original Image</h5> 
 
<img src="http://placekitten.com/200" /> 
 

 
<h5>Framed Image</h5> 
 
<div class="framed"> 
 
    <img src="http://placekitten.com/200" /> 
 
</div>

來源

2016-11-16 19:15:33 DaniP

就個人而言，我會使用background-image和background-position。在你的框架，你可以應用下面的CSS：

#myFrame { 
    background-image: url('/path/to/image.png'); 
    background-size: cover; 
    background-position: center; 
    background-repeat: no-repeat; 
}

background-size: cover;比例縮放的背景圖像佔用幀的100％。
background-position: center;將以背景圖像爲中心，正如您在所需示例中所述。
background-repeat: no-repeat;只是爲了阻止背景重複，這是默認行爲。

當然，將/path/to/image.png更改爲您的相對圖像路徑。如果你想使用img元素

Here is an example of this behavior.

來源

2016-11-16 19:04:44 Santi

如何從中心顯示圖片，小框架大圖片

回答

相關問題