Question

我有多个图像，我想调整到一个固定的高度，宽度将调整大小调整高度的比例，我想用jQuery实现这一点。所以我给了所有图像相同的类属性，我运行了这段代码：

<img src="img1.jpg" class="imgs">
<img src="img2.jpg" class="imgs">
<img src="img3.jpg" class="imgs">
<script>
$(document).ready(function(){
    $('.imgs').each(function(){
        oldH = $(this).naturalHeight;
        oldW = $(this).naturalWidth;
        divH = "500px";
        if(oldH > divH){
            newH = divH;
            calW = newH / oldH;
            newW = calW * oldW;
            $(this).naturalHeight = newH;
            $(this).naturalWidth = newW;
        } else{
            newH = oldH;
            newW = oldW;
            $(this).naturalHeight = newH;
            $(this).naturalWidth = newW;
        } 
    })  
});
</script>

但是图片没有调整大小，我仍然是jQuery的新手，所以我不是很好。我不知道这是否是实现这一目标的正确方法。如果不是，我需要了解如何实现这一点。

Answer 1

$(this).naturalHeight;无效。因为naturalHeight不是jQuery函数。

你可以试试这个

var image = new Image();
image.src = $(this).attr("src");
oldW = image.naturalWidth;
oldH = image.naturalHeight;

此方法在IE 8及更低版本中不起作用，因为它不支持'naturalWidth'和'naturalHeight'属性。要实现相同的使用此代码

var image = new Image();
image.src = $(this).attr("src");
image.onload = function() {
oldW = this.width;
oldH = this.height;
};

参考：Get Each Image Natural Height With jQuery

Answer 2

<div style="height: 100px">
<img src="random-img.jpg"
style="max-height: 100%; max-width: 100%">
</div>

这不是JQuery，但是我能给你的解决方案更简单。

试着告诉我。

Answer 3

我已经研究过了，这就是我出来的时候，它对我来说很有效：

bacab

如何使用jquery调整图像大小

3 个答案: