Image 浏览器缩放时如何在分区中包含图像？

我在页眉背景中有一个图像，当你缩放浏览器时，我不能强迫它按比例不断变化，并包含在页眉div中（同时覆盖）。缩小时，它会在侧面留下空白

请看一个实例

header div的CSS代码如下所示：

body {
    width:100%;
    min-width: 1280px;
    margin: 0 0 0 0;
    padding: 0 0 0 0;
    background:url(/sm.aspx?guid=1913);
    color: #000000;
    font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
    font-size: 0px;
}
#hd {
    background: url(/sm.aspx?guid=1903) top center no-repeat;
    background-size: contain;
    height: 150px;
    margin: 0 10% 0 10%;
    overflow: hidden;
}

由于我不是网页设计专家，我肯定是做错了什么。请帮我更正标题的代码

---

提前谢谢你

我认为最好的解决方案是使用

img

标签，而不是

背景图像

例如：

<div id="hd"><img src="sm.aspx?guid=1903" /></div>

#hd img {
   display: block;
   width: 100%;
   height: auto;
}


#高清img{
显示：块；
宽度：100%；
高度：自动；
}
您是否尝试添加到
#hd{background size:100%}
？刚刚尝试过。它确实有助于坚持立场。但在缩小的同时，它会降低高度（底部的图像）亲爱的巴尼，谢谢你的帮助。我确实像你说的那样，但只增加了10%的利润。但是，现在图像不适合div，正在复制。请看一下这个网站。然后你应该把
宽度
改为
80%
。