Question

This is my code

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

In this code i have an image which is the logo. I Just need to reduce the height of the image. What i have tried is manually setting the height to say 150px but what happens is that the height gets reduced but my width also reduces. Even if i hardcoded my width, still it reduces. The problem maybe the image is small.I also tried placing it in a div and i manually set the corresponding height and width but the div concept cuts the image. I dont want the image to be cut or something.I just want it to shrink in height. I dont care about the quality. How to do it?

Answer 1

Reducing the height is doing what almost anyone wants – keeping the aspect-ratio when you change the height. If you need to keep the width, change the width AND the height to the height it was with the desired width

for example 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);
});