Необходимо уменьшить высоту изображения с помощью 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>

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

Answer 1

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

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

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

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

Answer 2

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

, например 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 3

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

Например:

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

Answer 4

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

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

Вот демонстрация изображения 5x5, отображаемого как 300x20: http://jsfiddle.net/Guffa/A9pAP/