Как изменить размер изображения с помощью jquery

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

Я работал на него, и это то, что я пришел с, и она прекрасно работает для меня:

$(document).ready(function(){ 
    get = document.getElementsByClassName('imgs'); 
    for(var i=0; i < get.length; i++){ 
     oldH = get[i].naturalHeight; 
     oldW = get[i].naturalWidth; 
     divH = "500"; 
     if(oldH > divH){ 
      newH = divH; 
      calW = newH/oldH; 
      newW = calW * oldW; 
     get[i].height = newH; 
     get[i].width = newW; 
     console.log(newH, newW); 
     } else { 
      newH = oldH; 
      newW = oldW; 
     get[i].height = newH; 
     get[i].width = newW; 
     console.log(newH, newW); 
     } 
    } 
});