需要使用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

回答

相關問題