將圖像調整到屏幕高度，但保持比例

我有一些相對簡單的事情。我有一張應該顯示在網頁左側的圖片&它的高度應該是用戶的屏幕尺寸。將圖像調整到屏幕高度，但保持比例

我使用javascript將圖像大小調整爲用戶屏幕高度。但它並沒有調整它的大小。功能運行，但圖像大小不會改變。

有沒有辦法將圖像大小調整爲用戶屏幕高度&以保持透視（使寬度成比例）？

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"><!-- InstanceBegin template="/Templates/homepage.dwt" codeOutsideHTMLIsLocked="false" --> 
<head> 
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 

    <title>Kamalei - Home Page</title> 
    <style type="text/css"> 
    <!-- 
     html, body, div, form, fieldset, legend, label, img { margin: 0; padding: 0; } table { border-collapse: collapse; border-spacing: 0; } th, td { text-align: left; } h1, h2, h3, h4, h5, h6, th, td, caption { font-weight:normal; } img { border: 0; } 

     body { text-align: center; background-color: RGB(255, 255, 255); margin: 20px; } 

     #outerContainer { background-color: #DCFF9A; width: 100%; height: 100%; } 
     #midContainer { width: 100%; height: 100%; } 
     #innerContainer { min-width: 1200px; } 

    --> 
    </style> 

    <script type="text/javascript"> 
    <!-- 
     function getBrowserSize() 
     { 
      var res = {"width": 630, "height": 460}; 

      if (document.body) 
      { 
       if (document.body.offsetWidth) res["width"] = document.body.offsetWidth; 
       if (document.body.offsetHeight) res["height"] = document.body.offsetHeight; 
      } 

      alert("A: "+res["height"]); 
      if (window.innerWidth) res["width"] = window.innerWidth; 
      if (window.innerHeight) res["height"] = window.innerHeight; 
      alert("B: "+res["height"]); 

      return res; 
     } 

     function getScreenSize() 
     { 
      var res = {"width": 630, "height": 460}; 

      if (parseInt(navigator.appVersion)>3) 
      { 
       res["width"] = screen.width; 
       res["height"] = screen.height; 
      } 
      else if (navigator.appName == "Netscape" && parseInt(navigator.appVersion)==3 && navigator.javaEnabled()) 
      { 
       var jToolkit = java.awt.Toolkit.getDefaultToolkit(); 
       var jScreenSize = jToolkit.getScreenSize(); 
       res["width"] = jScreenSize.width; 
       res["height"] = jScreenSize.height; 
      } 

      return res; 
     } 

    --> 
    </script> 

</head> 
<body> 

    <div id="outerContainer"> 

     <div id="midContainer"> 

      <img id="kamaleiText" src="images/kamaleiText.png" alt="" /> 

      <div id="innerContainer"> 
       <p>abcd</p> 
      </div> 

     </div> 

    </div> 

    <!-- Run page load scripts --> 
    <script type="text/javascript"> 
    <!-- 
     //window.onresize = setBackgroundImgWidth; 
     alert("C: "+document.getElementById("kamaleiText").offsetBottom); 
     document.getElementById("kamaleiText").offsetBottom = getBrowserSize()["height"] + "px"; 
     alert("D: "+document.getElementById("kamaleiText").offsetBottom); 

     // after this the pictures height hasn't changed, its the same size when it should be the height of the users screen. 
    --> 
    </script> 

</body> 
</html>

來源

2011-06-28 Mack

-1

這其實很簡單。只需使用類似的東西：

<img src="http://image_url" style="height: 100%;" />

你可以絕對定位圖像或任何需要的東西。這個想法是，如果您指定width或height而不是另一個，它會自動按比例爲您調整其他屬性。沒有JavaScript需要。

注意：一般來說，發佈整個代碼是不好的做法。

來源

2011-06-28 03:37:48 dtbarne

感謝您的答覆。但設置內聯css樣式也不會更改圖像高度。我能做些什麼來解決這個問題？ – Mack

@Mack，嘗試刪除您的JavaScript並將@ dtbarne的樣式放入樣式表中。例如。 #midContainer img {height：100％;} – Dan

downvote的解釋？ – dtbarne

看到這篇文章的CSS技巧*：Perfect Full Page Background Image

來源

2011-06-28 03:37:58 Ravan

將圖像調整到屏幕高度，但保持比例

回答

相關問題