根据方向调整图像以填充div

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>