Question

我有4个带有图像的div，我需要根据img的宽度和高度添加一个类属性。

这是一个示例代码，用于解释我需要做什么。（显然，这段代码不起作用）

function cropImg(){
  var imgs = document.getElementsByClassName(".prodImg");
  for(i in imgs){   
    var imgWidth = imgs[i].naturalWidth;
    var imgHeight = imgs[i].naturalHeight;

    if(imgWidth>imgHeight){
      imgs[i].css({
        "max-height": "100%"
      });
    }else{
      imgs[i].css({
        "max-width": "100%"
      });
    }   
  }
}

我非常感谢你的帮助。

Answer 1

这不是最佳做法或最佳解决方案;只是简单的开始和调整。

$(function () {

    cropImg();

    function cropImg() {

        var imgs = $(".prodImg");
        imgs.each(function (index, element) {
            var imgWidth = $(this).width();
            var imgHeight = $(this).height();
            if (imgWidth > imgHeight)
                $(this).css({
                    "height": "100%",
                    "width": "auto"
                });
            else
                $(this).css({
                    "width": "100%",
                    "height": "auto"
                });

        });

    }

});

正确裁剪和调整图像大小并保持纵横比; check this demo

或stack answer。

Answer 2

jQuery .each()是你的朋友

确定图像真实大小的问题在于它可以在网站的页面上调整大小。而jquery函数只给出浏览器上的dimmensions而不是它们的实际大小。

对于我的解决方案，我建议精确地强制将图像的dimmensionment设置为它们的实际大小，以便知道它们的值以替换初始值。

PS：宽度或高度为100％，随时都有效，因为它给出了父元素的大小，而whitch很少是实际大小。

之前我测试过这段代码，但是层次结构css中的某些约束可能会让他感到厌倦。

$("div img").each(function( index ) {
    var
    sav_h = $(this).height(),
    sav_w = $(this).width(),
    real_h = 0,
    real_w = 0;

    $(this).css({width:'auto', height:'auto'});

    real_h = $(this).height(),
    real_w = $(this).width();

    $(this).height(sav_h).width(sav_w);
    console.log( index + "       h=" + real_h + '     w=' + real_w );
});

Answer 3

function cropImg() {
    $('.prodImg').each(function() {
        var isWider = $(this).outerWidth() > $(this).outerHeight();
        isWider ? $(this).css({'max-height':'100%'}) : $(this).css({'max-width':'100%'})
    })
}

使用jQuery将css添加到具有相同类的所有img

3 个答案: