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" />

以下是显示为300x20的5x5图像的演示：http://jsfiddle.net/Guffa/A9pAP/

需要使用javascript来降低图像的高度

4 个答案: