CSS / Javascript解決方案可根據圖像方向自動應用高度/寬度屬性

Question

所以我正在設計一個Wordpress主題，我有四個div（380x400），我使用帖子中的縮略圖作為背景填充，問題是，如果圖片是橫向的，則在底部留有空隙，因此我可以在CSS中不使用width:100% ，如果我使用height:100%則肖像圖像上的高度也存在同樣的問題。

我正在尋找做的是分配一個width的100％屬性如果圖像的高度大於寬度（例如更大style.width='100%' ）和height如果寬度大於高度。 我在尋找簡單性，我不介意使用jQuery解決方案，但是我對jQuery確實不熟悉。 只要長寬比保持不變，如果圖像從邊緣被裁剪，我也沒有問題。

附件是我正在描述的情況的屏幕截圖 。

以下是相關代碼：

    <?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%;
 }

Answer 1

由於您在網格中顯示縮略圖和文本，因此，簡便的方法是使所有縮略圖具有相同的大小。 您可以在生成縮略圖時修剪照片，也可以使用CSS隱藏其余部分。 這樣可以使您的網格看起來更整潔，並且如果文本和照片全部對齊，則在眼睛上會更容易。

如果您仍要顯示整個縮略圖，則可以將CSS / javascript / jQuery懸停在網格中的“固定大小”縮略圖上以顯示它。

編輯：創建了一個示例，以顯示不同方向/縱橫比的以剪切為中心的縮略圖 。 它只需要一個容器（主要是設置畫廊的寬度），然后<a href="..." style="background-image: url(...);"></a>都可以顯示縮略圖，並提供完整照片的鏈接。

在此示例中，我沒有包括標題或攝影師。 <a />標記充當容器-應該可以在其中添加文本，然后根據需要放置文本。