jquery图片宽高

Question

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

这是我的标记：

CSS：

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

HTML：

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

JQUERY 脚本：

        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

无意冒犯，但我不确定您的意图是什么。一个典型的实例要求是在图像周围维护一个特定的边界框，比如 150 像素。 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。