需要使用JavaScript

这是我的代码需要使用JavaScript

<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概念切割图像。我不想让图像被剪切或者什么东西。我只是希望它缩小高度。我不关心质量。怎么做？

来源

2012-03-19 Coder_sLaY

似乎所有三个电流suggesti在这个问题上应该工作。似乎你可能会遇到另一个问题 - 可能是使用CSS，或者可能是因为超时而调整大小。 – mplungjan 2012-03-19 15:14:45

降低高度正在做几乎任何人都想做的事情 - 在改变高度时保持纵横比。如果您需要保留的宽度，更改宽度和高度，这个高度与所需的宽度

例如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); 
});

来源

2012-03-19 13:39:02 mplungjan

Lol在小提琴中的图片：P – 2012-03-19 15:50:20

它属于@Jon – mplungjan 2012-03-19 16:13:46

是的，这将是我的照片，你是在打瞌睡。 :) – 2012-04-13 16:16:40

您可以使用style属性分别设置宽度和高度。

例如：

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

来源

2012-03-19 13:32:32

我试过了。因为图像很小。图像没有扩大到我们给的宽度... – 2012-03-19 13:35:28

这是标准的方式，它的工作原理。你必须有另一个问题。你能把你的网页在互联网上显示问题吗？ – 2012-03-19 13:47:21

您可以在CSS中做到这一点。

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

或者如果你想用javascript动态调整图像大小。

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

来源

2012-03-19 13:37:30

最后一个会不会调整两次，保持纵横比？ – mplungjan 2012-03-19 13:39:54

那么，它会分别在图像标签上设置高度和宽度属性。与硬编码属性效果相同。它会变得美丽扭曲。像这样：http://jsfiddle.net/TA6Qu/2/ – 2012-03-19 13:50:08

然后我不明白OP的问题 - 我们需要看到自从你使用的代码（我考虑并由于OP的担忧而被抛弃）的代码比我的简单得多。所以+1给你 – mplungjan 2012-03-19 15:05:04

您只需指定width和height属性，并且图像将显示在该尺寸：

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

这里是一个5x5的图像的演示显示为300x20：http://jsfiddle.net/Guffa/A9pAP/

来源

2012-03-19 13:40:32 Guffa

需要使用JavaScript

回答

相关问题