垂直居中的圖像縮略圖到固定大小的div

好的，我知道這已經被討論到死亡，人們對他們的問題得到了綠色的答案，但他們都沒有爲我工作。垂直居中的圖像縮略圖到固定大小的div

我想要做的是垂直居中的縮略圖，這是動態生成的，或通過AJAX加載到一個固定大小的一個div。在我的情況下200 * 200像素。

請去這個網站：click here並點擊例如「網絡」按鈕。你會看到所有的縮略圖都在或者在他們的盒子上面。我真的嘗試了我能想到的一切。我所知道的唯一選擇是將圖像高度硬編碼到每個縮略圖標記中，但這會花費很長時間，因爲我需要將它們的尺寸添加到數據庫中。

如果您正在使用Firebug，你可以輕鬆地編輯在網站上一切運行測試，這是我做的居多。

我希望有人能幫助我。我真的很感激它。非常感謝。

來源

2010-02-17 Cletus

這是行不通的？

<div id="outer"> 
    <div id="inner"> 
     //image goes here 
    </div> 
</div> 

#outer { 
    display:table; 
} 
#inner { 
    display:table-cell; 
    vertical-align:middle; 
}

來源

2010-02-17 21:42:47 Catfish

是的，這有助於！謝謝。我的錯誤是我在外部使用了「表格單元」而不是「表格」。謝謝！ – Cletus 2010-02-17 23:45:42

您應該知道這種方法在Internet Explorer中不起作用。實際上，在Internet Explorer中不可能包含「表」的值。 http://www.w3schools.com/css/pr_class_display.asp – Felix 2010-02-18 21:54:07

它適用於IE8！ – Cletus 2010-02-20 01:35:44

不幸的是，我不知道一個簡單的答案，因爲CSS未能提供真正的垂直對齊結構。你有兩個我知道的選項（並不意味着沒有其他選項）：在div.onepic中使用img元素的絕對定位（請參閱http://phrogz.net/CSS/vertical-align/index.html中的方法1）或者使用javascript計算縮略圖Y高度並設置頂部填充每個div.onepic到YG高度的img和div.onepic之間的差異的一半。使用jQuery的js代碼很容易做到。

來源

2010-02-17 21:46:35

菲利克斯的解決方案非常好。好戲！ – 2010-02-18 19:57:40

通常當我必須這麼做，我只是不使用<img>標籤。相反，我把這個圖像放在一個帶有background-position: 50% 50%的元素的背景上。例如：

HTML

<div class="onepic"> 
    <a href="http://www.dinomuhic.com/pic/web/Wigga.jpg" class="thickbox" style="background-image: url('http://www.dinomuhic.com/pic/web/Wigga_thumb.jpg')"></a> 
</div>

CSS

.thickbox { 
    display: block; 
    width: 200px; 
    height: 200px; 
    background-position: 50% 50%; 
}

當然，這可能不是搜索引擎友好的或緩慢降解的（因爲當沒有CSS）。但是，出於這個原因，你可以把一個<img>標籤並將其設置爲display: none，就像這樣：

HTML

<div class="onepic"> 
    <a href="http://www.dinomuhic.com/pic/web/Wigga.jpg" class="thickbox" style="background-image: url('http://www.dinomuhic.com/pic/web/Wigga_thumb.jpg')"> 
     <img src="http://www.dinomuhic.com/pic/web/Wigga_thumb.jpg"> 
    </a> 
</div>

CSS

.thickbox { 
    display: block; 
    width: 200px; 
    height: 200px; 
    background-position: 50% 50%; 
} 
.thickbox img { 
    display: none; 
}

有你有它。一個無JavaScript，易於搜索引擎優化的解決方案:-)。希望你明白這個概念，讓我知道是否需要解釋更多。

來源

2010-02-17 21:56:31 Felix

非常好的技術！感謝分享！ – Cletus 2010-02-18 00:42:08

我知道它的老，但可能會添加'background-size：cover;'到'.thickbox'，因此圖像填充縮略圖空間。 – 2014-01-08 20:10:29

另一種選擇，但不是語義正確或CSS-重點是包裝在一個表/行和垂直對齊。如果是頁面上的一個關閉，你意識到了與屏幕閱讀器可能的可訪問性問題，則可能是一個速戰速決，你可以在以後解決 - 取決於你的時間表...

來源

2010-02-17 22:14:31

這是一個很大的代碼，但作品像魅力。在閱讀了關於這個主題的幾篇文章後，我想出了它。它定位於EEN固定寬度和高度DIV各種尺寸的圖像

你的CSS應該包含這樣的：

.friend_photo_cropped{ 
    overflow: hidden; 
    height: 75px; 
    width: 75px; 
    position:relative; 
} 
.friend_photo_cropped img{ 
    position:relative; 
}

您的代碼應該是這樣的：

<?php 
list($width, $height) = getimagesize($yourImage); 
if ($width>=$height) 
{ 
     $h = '75'; 
     $w = round((75/$height)*$width); 
} 
else 
{ 
     $w = '75'; 
     $h = round((75/$width)*$height); 
} 
$top = -round(($h-75)/2); 
$left = -round(($w-75)/2); 
echo '<td height="75">'; 
echo '<div class="friend_photo_cropped">'; 
     echo '<img src="'.$yourImage.'" width="'.$w.'" height="'.$h.'" style="top:'.$top.'px;left:'.$left.'px;">'; 
echo '</div>'; 
echo '</td>'; 
?>

來源

2012-10-21 13:38:17 Rob

垂直居中的圖像縮略圖到固定大小的div

回答

相關問題