Question

如果图像宽度大于高度，我正在尝试将图像的高度设置为150px，如果图像高度大于宽度，则图像的宽度会变为150px。

这是我的标记：

CSS：

       .posts { width:150px; height:150px; }

HTML：

        <div class="posts"><img src="image" /></div>

JQUERY SCRIPT：

        var photoW = $('.posts img').width();
        var photoH = $('.posts img').height();

        if( photoW > photoH ){
            $(".posts img").css("width", "auto").css("height", "100%");
        }

        else {
            $(".posts img").css("width", "100%").css("height", "auto");
        }

它不起作用，我不知道为什么。如果你能帮助我，我将不胜感激。

Answer 1

问题可能是当你执行时图像可能没有被加载...所以等待图像加载

尝试类似

的内容

jQuery(function ($) {
    $('.posts img').load(function () {
        if (this.width) {
            if (this.height > this.width) {
                this.style.height = '100%'
            } else {
                this.style.width = '100%'
            }
        }
    }).filter(function () {
        return this.complete
    }).trigger('load')
})

演示：Fiddle

Answer 2

这里是fiddle，您应该在文档准备好的

上运行代码

$(document).ready(function(){
var photoW = $('.posts img').width();
        var photoH = $('.posts img').height();

        if( photoW > photoH ){
            $(".posts img").css({width: "auto",height: "100%"});
        }

        else {
            $(".posts img").css({width: "auto",height: "100%"});
        }
});

Answer 3

没有冒犯，但我不确定你的意图是什么。典型的实例要求是在图像周围维护特定的边界框，例如150px。 Here is a fiddle就是这样做的。请注意，宽度和高度没有CSS，因为两者都是动态设置的。这是代码：

var $photo, w_px, h_px;

$photo = $('.posts img');
w_px = $photo.width();
h_px = $photo.height();

if ( h_px > w_px && h_px > 150 ) {
  $photo.css({ height : 150, width : '' });
}
else if ( w_px > 150 ) {
  $photo.css({ height : '', width : 150 });
}

如果您的要求与您输入的要求相比，而不是this fiddle should do the trick。

Jquery图像的宽度和高度

3 个答案: