如何使用CSS將圖像放入200像素的方框中？

我有一堆圖像都適合400px×400px的框（即，其中一個尺寸爲400px，另一個尺寸較小）。我希望能夠使用CSS，但必要時使用jquery/javascript，使圖像適合200 x 200像素的框，以使圖像的兩個邊緣與盒子接觸，並且其他兩個邊緣之間存在間隙盒子。長寬比必須保持不變。如何使用CSS將圖像放入200像素的方框中？

我的HTML如下：

<div class="small"> 
    <img src="/images/photos/View.jpg" alt="View" /> 
</div>

我的CSS是：

div.images div.small 
{ 
    width:200px; 
    height:200px; 
    line-height:200px; 
    text-align:center; 
} 
div.images div.small img 
{ 
    vertical-align:middle; 
    max-width:200px; 
    max-height:200px; 
}

你可以看到一個樣本here。

不幸的是，我的風景圖像擁抱箱子的頂部，而我希望它們居中。另外，我不確定依靠max-width/max-height的明智之舉。

我該如何將這些圖像放在這些框中？

來源

2009-08-24 Eric

只有我已經能夠做到垂直居中是計算父的大小和的大小孩子，然後設置孩子相對於父母的位置，使其居中。如果您的定位支持他們的瀏覽器，則最大寬度和最大權重都可以。 – JoshBerke 2009-08-24 15:18:30

我在我的電腦上設置了它，它工作正常。查看您的示例頁面後，問題是因爲您已將圖像設置爲display:block。移除您的一般img規則的規則（奇怪的全局設置，反正），或者改變您發佈上面這個圖片規則：

div.images div.small img 
{ 
    vertical-align: middle; 
    max-width: 200px; 
    max-height: 200px; 
    display: -moz-inline-box; /* Firefox 2 */ 
    display: inline-block; 
}

默認情況下，img元素等「改爲」元素（ Flash等）是「內嵌塊」 - 這意味着它們像文本一樣內聯，但具有寬度和高度。

來源

2009-08-24 16:07:59 DisgruntledGoat

肖像圖片的頂部似乎有像素偏移（請參閱上一個鏈接）。任何想法爲什麼？ – Eric 2009-08-30 15:54:37

我不是100％確定的，但是對於文本來說它會很奇怪（儘管那裏沒有文字）。將'div.images div.small'設置爲'line-height：98px;'或將'font-size：1％'添加到'div.images div.small img'。 – DisgruntledGoat 2009-09-01 00:46:18

你嘗試使用：

display:block; 
margin-left:auto; 
margin-right:auto;

應該居中塊級元素

來源

2009-08-24 15:01:33 knittl

我的印象是''是一個內聯元素。無論如何，這不適用於垂直居中。 – Eric 2009-08-24 15:08:54

哦，我的壞，它是一個內聯元素。編輯我的答案。如果您的容器div具有固定的高度，那麼'margin：auto;'應該以垂直居中。 – knittl 2009-08-24 15:36:07

'margin：auto'只能水平居中，而不是垂直居中。 – DisgruntledGoat 2009-08-24 16:11:51

我需要做同樣的前一段時間，我發現了一個很好的實施this link。「在div中垂直和水平居中圖像，不知道圖像的大小」。

它適用於我的預期。

來源

2009-08-24 15:14:15 GmonC

太棒了，我不知道你可以在CSS中做到這一點。 – Zoidberg 2009-08-24 15:17:04

我會遠離表達式和其他IE黑客，我不知道他們甚至是必要的。 – DisgruntledGoat 2009-08-24 16:14:35

主要的問題是圖像需要拉伸以適合盒子，同時保持圖像的高寬比。我非常確定這種居中可以通過'line-height'實現。我的問題是調整圖像大小。 – Eric 2009-08-26 08:39:49

我就遇到了這個垂直居中問題一次得到它在所有瀏覽器正常工作，我使出的JavaScript/jQuery的：

$(document).ready(function() { 
    $('img').each(function() { 
     image_height = $(this).height(); 
     margin_top = (200 - image_height)/2; 
     $(this).css('margin-top', margin_top + 'px'); 
    }); 
});

請注意，您將需要$（窗口）.load代替$（document）.ready如果圖像尺寸沒有在html中給出。

來源

2009-08-24 17:19:53 jeroen

這是一個解決方案，無論您想要多大尺寸都可以工作。它將縮小但不是高檔，垂直和水平居中，只使用CSS。我花了一段時間才弄明白。

將您的<img>放入<div>之內，然後根據需要放置div。，給它你想要的大小，一定要設置position屬性），然後再應用此：

.mydiv > .myimg { 
    vertical-align: bottom; 
    max-height:  100%; 
    max-width:  100%; 
    position:  absolute; 
    margin:   auto; 
    top:   0; 
    right:   0; 
    bottom:   0; 
    left:   0; 
}

來源

2013-12-18 07:33:24

如何使用CSS將圖像放入200像素的方框中？

回答

相關問題