CSS：保持寬高比渲染圖像

灰色框中顯示動物的圖片，如下面
圖像尺寸的圖片所示必須是150×150像素
然而，我必須保持圖像的縱橫比，這意味着不會將整個圖像放入150x150的正方形。
由於大多數圖像將超過允許的150x150尺寸，因此我希望將顯示集中在圖像的中間位置。

一些HTML：

<div class="gallery-item" style="height: 232px;"> 
        <img src="/media/animals/images/african-buffalo.jpg" alt="African Buffalo "> 

        <div class="gallery-item-caption"> 
         <a href="/animals/african-buffalo" title="African Buffalo ">African Buffalo </a> 
        </div> 
</div>

一些CSS：

.gallery-item { 
float: left; 
padding: 15px 15px 15px 15px; 
margin: 15px; 
background-color: #ececec; 
}

查看：

enter image description here

來源

2014-02-23 chuckfinley

那麼......你希望我們爲你的計劃？你甚至沒有發佈http://jsFiddle.net – Itay

可能的重複[調整大小和裁剪圖像與CSS]（http://stackoverflow.com/questions/21966854/resize-and-crop-image-with-css ） –

可能值得生成服務器端的縮略圖。 –

而不是img您可以在div上設置background-image。如果您發現圖像不適合正方形（非常寬的圖像），則可以更改爲background-size:cover。從here拍攝理念，工作示例here

CSS

.gallery-item{ 
    width:50px; 
    height:50px; 
    border:solid 1px #000; 
    margin:10px; 
    background:url('http://lorempixel.com/100/200') center center no-repeat; 
    background-size:100%; 
}

來源

2014-02-23 11:37:23 Valentin

這是一個有趣的方法:)會給它一個鏡頭 – chuckfinley

你應該使用'background-size：cover;'而不是'background-size：100％;否則它只適用於高寬比高於想要的圖像 –

我發現[本頁]的第一個答案（http://stackoverflow.com/questions/1341358/set-size-on-background-image-with-css）詳細闡述了這一點。 –

CSS：保持寬高比渲染圖像

回答

相關問題