イメージをオリエンテーションに基づいて塗りつぶす

Question

基本的には、アスペクト比を維持しながら画像にdivを塗りつぶすようにしています。だから私はjqueryを使って、それらが縦長か横長かを識別し、そこから幅または高さを設定します。

私の問題は、コードがすべての画像ランドスケープクラスを与えることです。私は知っている理由を知って私の知恵の終わりです...

ありがとう！

HTML

<div class="prop"> 
    <div class="propimage"><img src="{@image}" alt="{@prop_name}"></div> 
    <div class="propname">{@prop_name}</div> 
    <div class="propdescription">{@description}</div> 
    <div class="propprice">{@price}</div> 
    </div> 

CSS

.portrait img { 
    width: 100%; 
    } 
    .landscape img { 
    height: 100%; 
    } 
    .propimage img { 
     display: block; 
    } 
    img { 
     max-width: none; 
    } 
    .propimage { 
     width: 100%; 
     height: 300px; 
     overflow: hidden; 
     float: left; 
    } 

SCRIPT

<script> 
    $(".propimage").each(function(){ 
     // Uncomment the following if you need to make this dynamic 
     //var refH = $(this).height(); 
     //var refW = $(this).width(); 
     //var refRatio = refW/refH; 

     // Hard coded value... 
     var refRatio = 240/300; 

     var imgH = $(this).children("img").height(); 
     var imgW = $(this).children("img").width(); 

     if ((imgW/imgH) < refRatio){ 
      $(".propimage").addClass("portrait"); 
     } else { 
      $(this).addClass("landscape"); 
     } 
    }) 
    </script> 

Answer 1

私たちはあなたのコードの作業例を見ることができるように、jsのフィドルにあなたのコードをアップロードするか、リンクを貼り付けてください。その間にこのコードを試してください

<script> 
    $(".propimage").each(function(){ 
     // Uncomment the following if you need to make this dynamic 
     //var refH = $(this).height(); 
     //var refW = $(this).width(); 
     //var refRatio = refW/refH; 

     // Hard coded value... 
     var refRatio = 240/300; 

     var imgH = $(this).children("img").height(); 
     var imgW = $(this).children("img").width(); 

     if (imgW=<200 || imgH<=300)){ 
      $(this).children("img").css("width","100%"); 
      $(this).css("width","100%"); 
     } else { 
      $(this).children("img").css("height","100%"); 
      $(this).css("height","100%"); 
     } 
    }) 
    </script>