如何根据窗口自动调整图像大小

我目前面临的问题是当我尝试根据不同的分辨率调整图像大小时。输出我尽量做到像：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/）。当屏幕分辨率发生变化时，我在调整高度和宽度时做了什么。希望这可以帮助。 –

如何根据窗口自动调整图像大小

回答

相关问题