Html/Css - 如何讓圖像伸展100％寬度的容器，然後在其上顯示另一個圖像？

我正在努力獲得頭腦的佈局，我一直在想。Html/Css - 如何讓圖像伸展100％寬度的容器，然後在其上顯示另一個圖像？

這是迄今爲止在html：

<div id="header"> 
    <img src="/img/headerBg.jpg" alt="" class="headerBg" /> 
    <a href="/"><img src="/img/logo.png" alt="Logo" class="logo" /></a> 
    <div id="loginBox"> 
     other code 
    </div> 
</div>

到目前爲止的CSS：

#header { 
    height: 130px; 
    margin: 5px 5px 0 5px; 
    border: #0f0f12 outset 2px; 
    border-radius: 15px; 
} 

#loginBox { 
    float: right; 
    width: 23.5%; 
    height: 128px; 
    font-size: 75%; 
} 

.headerBg { 

} 

.logo { 
    width: 50%; 
    height: 120px; 
    float: left; 
    display: block; 
    padding: 5px; 
}

我所要完成的，是有形象「headerBg.jpg」顯示器100 ％div「header」的寬度，所以基本上它將是div本身的背景。然後在「headerBg.jpg」上方顯示圖片「logo.png」和div「loginBox」。

徽標應該浮動到最左端，登錄框浮動到最右邊，如在CSS中。

隨着圖像被移除，徽標和div被正確放置，但是當圖像被引入時，它們將兩個浮動的項目放置在流中的圖像之後。

我已經嘗試過各種補充和重新配置，但沒有證明可以解決我希望他們如何。

我在css中添加了圖像作爲標題div的背景，但它不能以這種方式拉伸100％。

任何人都可以提供一些見解嗎？

此外，任何涵蓋此類內容的教程都將成爲我收藏的一大亮點！

謝謝！

來源

2012-04-14 Craig van Tonder

<!DOCTYPE html> 
<html> 
<head> 
    <meta charset="UTF-8" /> 
    <title>Render this</title> 
    <style type="text/css"> 
#header { 
    position:relative; 
    height: 130px; 
    margin: 5px 5px 0 5px; 
    border: #0f0f12 outset 2px; 
    border-radius: 15px; 
} 

#loginBox { 
    position:relative; 
    float: right; 
    width: 23.5%; 
    height: 128px; 
    font-size: 75%; 

} 

.headerBg { 
    position: absolute; 
    width: 100%; 
    height: 100%; 
    z-index: -1; 
} 

.logo { 
    position:relative; 
    width: 50%; 
    height: 120px; 
    float: left; 
    display: block; 
    padding: 5px; 
} 
    </style> 
</head> 
<body> 
<div id="header"> 
    <img src="img/headerBg.jpg" alt="" class="headerBg" /> 
    <a href="/"><img src="img/logo.png" alt="Logo" class="logo" /></a> 
    <div id="loginBox"> 
     other code 
    </div> 
</div> 

</body> 
</html>

來源

2012-04-14 21:50:49 chadpeppers

感謝爲了您的回覆，但這並不能解決我的問題。我已經試過了，但由於圖像寬度爲1084px，當顯示分辨率增加到大於此值時，它不會佔用容器的全部寬度，在這種情況下，「標題」會隨着顯示器寬度的增加而增加。它最初是爲什麼我選擇了在代碼中的圖像，以便能夠拉伸它。 – 2012-04-14 21:58:23

使用background-size：100％100％; – chadpeppers 2012-04-14 22:03:30

這是css3，並不是很適合瀏覽器：/這就是爲什麼我試圖找到一種方式來調整圖像的大小，而不是訴諸於此。 – 2012-04-14 22:06:35

只需將標題背景圖像作爲該div的真實背景即可。浮動不會以該位置的方式忽略其他對象：絕對的。

#header { 
    height: 130px; 
    margin: 5px 5px 0 5px; 
    border: #0f0f12 outset 2px; 
    border-radius: 15px; 
    background: url(headerBg.jpg); 
}

來源

2012-04-14 21:51:26 mxniu

嗨，謝謝，但這不允許我拉伸圖像，以適應彈性股利的寬度。 – 2012-04-14 21:59:18

.header { 
    position: relative; 
} 

.headerBg { 
    position: absolute; 
    left: 0px; 
    right: 0px; 
    width: 100%; 
}

注意，這將縮放圖像以適合<div>的寬度;如果您只希望它水平調整大小，那麼您應該明確設置高度。

如果您只希望圖像在大窗口中縮放，您還可以嘗試max-width: 100%;。

來源

2012-04-14 22:22:30 Neil

設置不會顯示任何額外部件的div類。

div { 
overflow: hidden; 
}

來源

2013-06-17 04:47:47 fahomid

這些設置工作非常適合我。它會規模烏爾照片所有圖片..

#headerBg { 
position: absolute; 
top: 0px; 
left: 0px; 
right: 0px; 
width: 100%; 
height: 100%;

}

來源

2015-05-04 06:45:27 NICK

-1

嘗試使用在你的CSS：

max-height:100%;

來源

2017-02-22 06:22:29

Html/Css - 如何讓圖像伸展100％寬度的容器，然後在其上顯示另一個圖像？

回答

相關問題