Question

我正在一个页面上创建一个包含数十个风景和肖像图像的图库。我想根据动态添加的CSS类（即风景图像的“.landscape”）为每个图像设置样式。

我遇到了下面的代码（从2003年开始！）为了确定比率并为单个图像添加一个类，但是我需要为某个div id中的所有图像自动添加类。老实说，我只是不了解JavaScript或jQuery来解决这个问题。

<script language="JavaScript" type="text/javascript">
<!--
function getDim() {
myImage = new Image;
myImage.src="myimage.gif";//path to image
document.divImage.src=myImage.src;
var imgProp;
var width = myImage.width;
var height = myImage.height;
var ratio = width/height;
if ( ratio > 1 ) {
document.getElementById('image').className="portrait";
}
else {
document.getElementById('image').className="landscape";
}
}
//-->
</script>

Answer 1

使用jQuery：

$('#divID img').each(function(){
    $(this).addClass(this.width > this.height ? 'landscape' : 'portrait');
});

Answer 2

相当简单的jQuery：

$('#yourId').find('img').each(function(i,elem){
    var $this = $(this),
        ratio = $this.width() / $this.height();

    $this.addClass((ratio < 1) ? 'portrait' : 'landscape');
});

See example →

Answer 3

让我们说，你的div包含类gallery并且你正在使用jQuery：）

$(document).ready(function(){
    $('.gallery img').each(function(){
        var width = $(this).width();
        var height = $(this).height();
        var className;
        if (width/height > 1) className = "portrait";
        else className = "landscape";
        $(this).addClass(className);
    });
});

这种方式更长，但允许您添加更多规则（如果有任何理由这样做:) ..即：

if (width/height == 1) className = "square";

Answer 4

如果设置img width / height会干扰你的css，你可以将它设置为data-width / data-height：

  $('#your-div-Id').find('img').each(function(i,elem){
      var $this = $(this),
          ratio = $this.attr('data-width') / $this.attr('data-height');
      $this.addClass((ratio < 1) ? 'portrait' : 'landscape');
  });

HTML：

<div id="your-div-Id">
    <img src="#" data-width="60" data-height="30" />
</div>

Edited mVChr's example

根据图像比添加CSS类

4 个答案: