我目前在尝试根据不同的分辨率调整图像大小时遇到问题。我尝试实现的输出如下: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>
不幸的是,它不能根据浏览器自动调整大小。请告知我这段代码的哪一部分做错了。非常感谢。
最佳答案
如果您想根据您的 div 大小调整图像大小,请将图像用作 div 背景并从您的代码中删除图像标签。(您的示例就是这样做的)
如果您不想调整图像大小,请使用图像标签并从您的样式中删除 background
属性。
关于html - 如何根据窗口分辨率自动调整图像大小,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/42756621/