根据图像比例添加 CSS 类答案

【问题标题】：Adding CSS Class According to Image Ratio根据图像比例添加 CSS 类
【发布时间】：2011-04-13 21:55:14
【问题描述】：

我正在创建一个图片库，在一个页面上包含数十张横向和纵向图片。我想根据其方向使用动态添加的 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>

【问题讨论】：

标签： javascript jquery image class

【解决方案1】：

使用 jQuery：

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

【讨论】：

嗯，哇。 14 小时内给出 3 个答案。你们真棒！今天早上我将从@cwolves 的解决方案开始，让你知道它是怎么回事！哇！
。 . .它完美无瑕！不幸的是，我使用的 CMS 没有返回图像的高度和宽度信息。幸运的是，我的 CMS 开发人员非常擅长更改请求，所以希望他今天能将这些信息添加到 XML 输出中！感谢 CWOLVES 和所有其他加入的人！
又好又甜！

【解决方案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 →

【讨论】：

嗯，哇。 14 小时内给出 3 个答案。你们真棒！今天早上我将从@cwolves 解决方案开始，让你知道它是怎么回事！哇！

【解决方案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";

【讨论】：

$(this).width() 是浪费。您不必要地创建相同的 jQuery 对象 3 次，并且您正在使用 jQuery 做一些它不需要做的事情，只需检查 this.width
啊，我以为 $(this) 会使用引用。
它引用了图像，是的，但是您不必要地创建了 3 个不同的 jQuery 对象。在这个例子中它不会占用太多的内存/空间，但是养成做var $this = $(this)的习惯，或者类似的东西是好的。此外，要改掉使用 jQuery 处理 everything 的习惯，例如.width() 当.width 在 DOM 节点上给你同样的东西。
是的，你是对的。我在考虑 var image = $(this)，但最后我没有使用它.. 无论如何，如果它使用引用，结果将是相同的。而且我对纯javascript不太熟练，所以我不知道简单的.width，所以感谢您指出这一点。很高兴学到一些东西:)

【解决方案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

【讨论】：