html - 如何根据窗口分辨率自动调整图像大小

标签 html css image resize

我目前在尝试根据不同的分辨率调整图像大小时遇到​​问题。我尝试实现的输出如下: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/

相关文章:

html - Facebook 评论 - wordpress

php - Wordpress - 在菜单和内容之间添加一个小部件

javascript - 如何删除div内的svg

.net - 设置 ZedGraph 库中图形的最大值和最小值

java - Android - ImageView 不显示照片

html - 如何在 CSS 中将文本向右对齐?

javascript - 替代 mcdropdown

javascript - 单击时将 CSS 边框移至右侧

ios - 直接使用 UIDocumentINteractionController 自动打开 WhatsApp,无需显示其他应用程序

html - 在 html 打印上设置 2 个分页符