Html 如何以1:1的比例插入图像

我有一个尺寸为2000x160的图像，我必须以1:1的比例将其作为标题

我有这个标记，但它不起作用

<div id="header">
    <a href="#" style="display:block;width:100%;height:160px;"><img src="/images/header-bg.jpg" alt="header"></a>
</div>

---

您可以使用CSS背景而不是

，并使用

背景位置使其居中。
此外，为了解决低分辨率下的可见性问题，您可以使用媒体查询来调整背景图像的大小（甚至可以应用不同的低分辨率背景图像）

看这把小提琴：

HTML

<div id="header">
    <a href="#"></a>
</div>

尝试将宽度和高度指定为
标记的属性，在这里效果很好，我并不感到惊讶<代码>宽度：100%

表示容器的100%，而不是图像本身。试试宽度：2000px。如果有必要，可以使用

溢出：隐藏
来消除产生的水平滚动条。但是我想让它超出页眉的宽度。为什么不在CSS中使用图像作为背景？删除
img
元素，并将
#header
的
background
更改为
url（“/images/header bg.jpg”）#5F9936
。然后，您可以使用
背景位置
（Google it）属性调整居中。
<div id="header">
    <a href="#"></a>
</div>

#header {
    padding: 0;
    margin: 0;
    background: url("http://www.placehold.it/2000x160") #5f9936;
    background-position: 50% 50%;
    height: 160px;
    width: 100%;
}
@media all and (max-width: 900px) {
    #header {
        height: 80px;
    }
}
#header a {
    display: block;
    height: 100%;
    width: 100%;
}