Question

我有一张尺寸为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

/*header*/
#header {
    padding: 0;
    margin: 0;
    background: #5f9936;
    height: 160px;
    width: 100%;
}
#header img {
    height: 160px;
}

Answer 1

您可以使用CSS背景而不是<img>，并使用background-position使其居中。此外，解决低分辨率的可见性问题，您可以使用媒体查询来调整背景图像的大小（甚至应用较低分辨率的不同背景图像）。

看到这个小提琴：http://jsfiddle.net/dJfDS/2/

<强> HTML

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

<强> CSS

#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%;
}

如何以1：1的比例插入图像

1 个答案: