如何根據窗口自動調整圖像大小

我目前面臨的問題是當我嘗試根據不同的分辨率調整圖像大小時。輸出我儘量做到像：http://jaxboxtech.com 如何根據窗口自動調整圖像大小

下面是我的代碼：

#container{ 
 
    width: 100%;  
 
} 
 

 
#img{ 
 

 
background: transparent center no-repeat url('image.png');  
 
width: 100%; 
 
height: 100%; 
 
max-height: 850px; 
 
background-size:cover; 
 
}

<html> 
 
     <body> 
 
      <div>     
 
      <button>Efficiency</button>    
 
      <button>Power Metering</button>            
 
     </div> 
 

 
      <div id="img">    
 

 
      <img src='image.png' alt="" /> 
 

 
     </div> 
 

 
     </body> 
 
    </html>

不幸的是它可以基於瀏覽器沒有自動調整。請提醒我這部分代碼錯誤地做了。非常感謝你。

來源

2017-03-13 goh6319

哪個圖片，您在html中定義的圖片或您在div上設置爲背景圖片的圖片？此外，還有一個流浪的''標籤沒有匹配的開標籤。 –

@lamelemon，1是錯誤我糾正它。 – goh6319

如果要調整圖片大小，按您的DIV大小，然後利用圖像作爲背景的DIV從你的代碼中刪除圖像標記。（你是哪個例子，如何做）

如果你不想調整圖像的大小使用圖像標記並從您的樣式中刪除background屬性。

來源

2017-03-13 08:03:14

我想要我的圖像作爲背景，我對圖像有一定的措辭 – goh6319

嗨，我已經放在一起JSFiddle供您參考[jsFiddle]（https://jsfiddle.net/subhrajyoti21/onby3p5v/）。當屏幕分辨率發生變化時，我在調整高度和寬度時做了什麼。希望這可以幫助。 –

如何根據窗口自動調整圖像大小

回答

相關問題