html - 根据分辨率制作图像比例

Question

我有一个 width:100% 图片作为我网站的标题，比如 here:http://directdatanou.comli.com/

如何使图像根据屏幕分辨率缩放？

我尝试使用图像作为 div 的背景，如下所示:

 <div id="header" class="latime_100p">

    </div>

使用 CSS:

#header{
    background: #5b6773 url("../grafica/header.jpg") no-repeat top center;
    background-size: cover;
    height:500px;
}

但它不能在大分辨率下正确缩放(随着屏幕宽度和高度的增加，它只显示部分图像)。

所以我最终直接使用了图像？

如何让它根据分辨率优雅地缩放？

谢谢。

Answer 1

如果您需要显示所有图像:

<img src="...." class="img">

.img {
     width: 100%;
     height: auto;
}

就这样