нужно уменьшить высоту изображения с помощью JavaScript

Question

Это мой код

<div data-role="page" id="callAjaxPage"> 

    <img id="logo" src="images/logo.JPG" alt="logo" /> 

    <div data-role="header"> 
     <h1>Login</h1> 
    </div> 

    <div data-role="content"> 
     <form id="callAjaxForm" data-ajax="false"> 
      <div data-role="fieldcontain"> 
       <label for="userName" id="userNameLabel">Username</label> <input 
        type="text" name="userName_r" id="userName" value="" /> <label 
        for="password" id="passwordLabel">Password</label> <input 
        type="password" name="password_r" id="password" value="" /> <br /> 

       <button data-theme="b" id="submit" type="button">Submit</button> 
      </div> 
     </form> 
    </div> 
</div> 

В этом коде у меня есть изображение, которое является логотипом. Мне просто нужно уменьшить высоту изображения. Я попытался вручную установить высоту, чтобы сказать 150 пикселей, но происходит то, что высота уменьшается, но моя ширина также уменьшается. Даже если я жестко закодировал свою ширину, все равно она уменьшится. Проблема может быть, изображение небольшое. Я также попытался разместить его в div, и я вручную установил соответствующую высоту и ширину, но концепция div уменьшает изображение. Я не хочу, чтобы изображение было разрезано или что-то в этом роде. Я просто хочу, чтобы он сжимался по высоте. Я не забочусь о качестве. Как это сделать?

Answer 1

Уменьшение высоты делает то, что почти любой хочет - сохраняя соотношение сторон при изменении высоты. Если вам нужно сохранить ширину, изменение ширины и высоты к высоте он был с желаемой шириной

, например DEMO

$(document).ready(function() { 
    var img = $("#logo"); 
    var width = img.width(); 
    alert(width); 
    img = $('<img height="250" width="'+width+'" alt="'+img.attr("alt")+'" src="'+img.attr("src")+'"/>') 
    $("#logo").replaceWith(img); 
}); 

Answer 2

Вы можете установить ширину и высоту отдельно, используя атрибут style.

Например:

<img style="height:40px;width:300px;" src=0NfSJ.jpg> 

Answer 3

Вы можете сделать это в CSS.

#logo { 
    width: 80px; 
    height: 30px; 
} 

Или если вы хотите изменить размер изображения динамически с помощью javascript.

$("#logo").attr("width", $("#logo").width()); 
$("#logo").attr("height", 30); 

Answer 4

Вы просто указать ширину и атрибуты высоты, и изображение будет будет отображаться в том, что размер:

<img id="logo" src="images/logo.JPG" alt="logo" width="300" height="20" /> 

Вот демо 5х5 изображения отображаются в виде 300x20: http://jsfiddle.net/Guffa/A9pAP/