Добавление CSS-класса в соответствии с соотношением изображений

Question

Я создаю галерею изображений с десятками пейзажных и портретных изображений на одной странице.Я хочу стилизовать каждое изображение с помощью динамически добавляемого класса CSS (то есть «.landscape» для пейзажных изображений) в соответствии с его ориентацией.

Я наткнулся на код ниже (с 2003 года!) Для определения соотношения и добавлениякласс для одного изображения, но мне нужно, чтобы классы добавлялись автоматически для всех изображений в пределах определенного идентификатора div.Честно говоря, я просто недостаточно знаю о 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');
});

См. Пример & # x2192;

Answer 3

Если настройка 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>

Отредактированный пример mVChr

Answer 4

Допустим, ваш содержащийся 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";