画像の向きに基づいて高さ/幅の属性を自動的に適用するCSS/Javascriptソリューション

Question

Wordpressのテーマをデザインしています.4つのdiv（380x400）を使って投稿のサムネイルを背景として使用しています。問題は、画像が風景の場合は、それはheight:100%を使用すると、私はCSSでwidth:100%、ポートレート画像の高さと同じ問題を使用することはできませんので、底にギャップを残している。私がやって探していたもの

は、画像の高さが幅よりも大きい場合には、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%; 
} 

Answer 1

、良いと簡単に両方の方法アウトはすべてのサムネイルを同じにすることですサイズ。サムネイルを生成するときに写真をトリミングするか、cssで残りの部分を隠すことができます。これによりグリッドがよりきれいに見えるようになり、テキストと写真がすべて並んでいると目がより簡単になります。

まだサムネイル全体を表示したい場合は、グリッド内の「固定サイズ」のサムネイルにカーソルを置いたときに表示するためにCSS/javascript/jQueryを使用できます。

編集：clipping centered thumbnails of different orientation/aspect ratiosを表示する例を作成しました。必要なのはコンテナ（主にギャラリーの幅を設定する）で、<a href="..." style="background-image: url(...);"></a>はサムネイルを表示してフル写真のリンクを提供するだけです。

私はこの例ではタイトルも写真家も含めませんでした。 <a />タグはコンテナとして機能し、その中にテキストを追加して必要に応じて配置できるようにする必要があります。