如何在比例1中插入圖像：1

我有一個尺寸爲2000x160的圖像我必須將它作爲標題以1：1的比例。如何在比例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; 
}

來源

2014-01-29 marcin.g

嘗試指定的寬度和高度爲''標籤的屬性 – apohl

做工精細這裏http://jsfiddle.net/j08691/dJfDS/ – j08691

我並不感到驚訝。 'width：100％'意味着容器的100％，而不是圖像本身。改爲使用'width：2000px'。如果有必要，可以用'overflow：hidden'做些什麼來擺脫產生的水平滾動條。 –

您可以使用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%; 
}

來源

2014-01-29 17:55:58 Kroltan

如何在比例1中插入圖像：1

回答

相關問題