如何使用jQuery调整图像大小以适应DIV

Question

我有一个正方形的 DIV 和大尺寸的竖向和横向图片。

我需要将图片适应到带有额外部分的 DIV 中，并使用 overflow:hidden。

例如，如果是竖向图片，则设置宽度为 DIV 的宽度，高度自适应。

横向图片相反。

我尝试了这个脚本，但它没有生效。

        $('.magic').each(function(){
        if($(this).css('width')>$(this).css('height')){
            $(this).css('height', '300px');
            $(this).css('width', 'auto');                
        }
        else{
            $(this).css('width', '300px');
            $(this).css('height', 'auto');


        }
    });

PS图像不能拉伸，必须进行缩放处理。

- cjds

---

为什么不使用CSS？ - Ram

.magic是图片列表吗？否则，可以尝试$('.magic img')。 - Jeremy Blalock

图片大小事先不知道 + magic 是图像的类 @undefined - cjds

Answer 1

使用如下CSS：

.magic.portrait {
    height: 300px;
    width: auto;
}

.magic.landscape {
    width: 300px;
    height: auto;
}

只需使用JS添加一个类即可。

$('.magic').each(function(){
    if($(this).width() > $(this).height()){
        $(this).addClass('landscape');
    }else{
        $(this).addClass('portrait');
    }
});

这有助于保持应用程序逻辑和样式的分离。更好的做法是在服务器端添加这些类，避免使用JavaScript。

- DigitalDesignDj

---

已编辑以解决字符串！=数字问题。 - DigitalDesignDj

@Fresheyeball，我错了，我在jfriend00的回答启示下进行了编辑。 - DigitalDesignDj

@Fresheyeball - 我的评论得到回应，答案已经被编辑以解决问题。您可以查看编辑历史记录。它曾经有 if($(this).css('width')>$(this).css('height')) 这个字符串比较，而不是数字比较。 - jfriend00

Answer 2

如果你真的想要一个JavaScript/jQuery解决方案，可以看看jQuery AnyStretch插件。它可以实现你想要的功能。

- Arman P.

Answer 3

如果图片尺寸事先已知，你可以完全使用CSS来实现这个功能。

如果你决定必须使用JavaScript，那么你当前代码的问题在于$(this).css('width')返回的是一个字符串，比如"300px"，而不是一个数字。因此，两个字符串之间的比较无法像你期望的数字比较那样正常工作。

你可以将其转换为数字，或者直接使用$(this).width()，它会返回以像素为单位的数字。

以下是一个可行的示例：

$('.magic').each(function(){
    var self = $(this);
    var width = self.width();
    var height = self.height();
    if (width > height) {
        self.css({height: "300px", width: "auto"});
    } else {
        self.css({width: "300px", height: "auto"});
    }
});

演示：http://jsfiddle.net/jfriend00/B7hVp/

- jfriend00