基於圖像方向自動應用高度/寬度屬性的CSS/Javascript解決方案

所以我設計了一個Wordpress主題，我有四個div（380x400），我使用來自帖子的縮略圖填充爲背景，問題是，如果圖片是橫向的，它會在底部留下間隙，所以我不能在CSS中使用width:100%，如果我使用height:100%，則與縱向圖片上的高度相同的問題。基於圖像方向自動應用高度/寬度屬性的CSS/Javascript解決方案

我一直在尋找這樣做是爲了分配100％的width財產，如果圖像的高度大於寬度（例如style.width='100%'），如果寬度大於高度的height更大。我在尋找簡單性，我不介意使用jQuery解決方案，但我對jQuery並不熟悉。我也沒有問題，只要縱橫比保持不變，圖像就從邊緣裁剪掉。

附加的是我所描述的情況的Screenshot。

下面是相關代碼：

<?php $thumbnail = ''; 
     $post_image_id = get_post_thumbnail_id($post_to_use->ID); 
     if ($post_image_id) { 
     $thumbnail = wp_get_attachment_image_src($post_image_id, 'post-thumbnail', false); 
     if ($thumbnail) (string)$thumbnail = $thumbnail[0]; 
     } 
     if (!empty($thumbnail)) { ?> 
<div class="item" id="post-<?php the_ID(); ?>"> 
    <img class="background" src="<?php echo $thumbnail; ?>" onload="changeWidth(this);"> 
<div class="date"> 
<?php the_date(); ?> 
</div>

CSS：

.item, .no-thumbnail{ 
    width:380px; 
    height:400px; 
    margin:5px 0px; 
    border:1px solid black; 
    float:left; 
    position:relative; 
    margin:5px; 
    display:inline; 

} 

.item img.background{ 
    position:absolute; 
    left:0px; 
    z-index:-500; 
    width:150%; 
}

來源

2012-02-04 Noah Rainey

既然你在一個網格，顯示縮略圖和文字都好，簡單的辦法是讓所有的縮略圖相同尺寸。您可以在生成縮略圖時修剪照片，或者使用css隱藏其他照片。這將使您的網格看起來更乾淨，並且如果文本和照片全部對齊，則在眼睛上更容易。

如果您仍然想要顯示整個縮略圖，則可以使用CSS/javascript/jQuery在網格中懸停在「固定大小」縮略圖上時顯示它。

編輯：創建一個示例以顯示clipping centered thumbnails of different orientation/aspect ratios。所需要的只是一個容器（主要是設置圖庫的寬度），並且<a href="..." style="background-image: url(...);"></a>都顯示縮略圖並提供完整照片的鏈接。

在這個例子中，我沒有包括標題和攝影師。 <a />標籤充當一個容器 - 應該可以在其中添加文本，然後根據需要定位它。

來源

2012-02-04 12:46:23

我喜歡這個解決方案，我將不得不努力將它整合到PHP for Wordpress中，但我認爲這將是最好的解決方案，目前我正在搞亂z-index，這有點混亂。 – 2012-02-04 14:59:46

該示例現在顯示[懸停在縮略圖上方時的照片標題]（http://jsfiddle.net/WraRz/1/）。 – 2012-02-05 12:47:38

你可以[也看看'background-size']（http://stackoverflow.com/a/9149164/907779）。如果你決定加載更大的背景圖片來顯示懸停，或者只是想[儘可能地顯示大小不合適的縮略圖]，它可能會對你有所幫助（http://jsfiddle.net/WraRz/2/ ）。 – 2012-02-05 12:52:35

基於圖像方向自動應用高度/寬度屬性的CSS/Javascript解決方案

回答

相關問題