Html/Css - 如何让图像拉伸容器的 100% 宽度，然后在其上显示另一个图像？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/10157629/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Html/Css - How to get an image to stretch 100% width of a container then display another image over it?
提问by Craig van Tonder
I am struggling with getting the layout of the header i have in mind together.
我正在努力将我想到的标题的布局放在一起。
Here is the html so far:
这是到目前为止的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>
And the css so far:
到目前为止的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;
}
What I am trying to accomplish, is have the image "headerBg.jpg" display to 100% width of the div "header", so essentially it will be the background of the div itself. Then have the image "logo.png" and the div "loginBox" display above "headerBg.jpg".
我想要完成的是将图像“headerBg.jpg”显示为 div“header”的 100% 宽度，因此基本上它将成为 div 本身的背景。然后在“headerBg.jpg”上方显示图像“logo.png”和div“loginBox”。
The logo should be floated to the far left end and the loginBox floated to the far right as in the css.
徽标应该浮动到最左端，而 loginBox 应该像在 css 中一样浮动到最右边。
With the image removed, the logo and div are placed correctly, but when the image is introduced they two floated items are placed after the image in the flow.
移除图像后，徽标和 div 被正确放置，但是当引入图像时，它们会在流中的图像之后放置两个浮动项。
I have tried various additions and reconfigurations but none have proven to work out how I want them to.
我尝试了各种添加和重新配置，但都没有证明可以解决我想要的问题。
I have added the image in the css as a background to the header div, but it does not stretch 100% that way.
我已将 css 中的图像作为背景添加到标题 div，但它不会以这种方式拉伸 100%。
Would anyone be able to provide some insight on this?
有没有人能够对此提供一些见解？
Also any tutorials covering things like this would be a great addition to my collection!
此外，任何涵盖此类内容的教程都将是我收藏的一个很好的补充！
Thank you!
谢谢！
采纳答案by chadpeppers
<!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>
回答by Neil
.header {
position: relative;
}
.headerBg {
position: absolute;
left: 0px;
right: 0px;
width: 100%;
}
Note that this will scale the image to fit the width of the <div>; if you only want it to resize horizontally then you should set the height explicitly.
请注意，这将缩放图像以适应<div>; 如果您只希望它水平调整大小，那么您应该明确设置高度。
You could also try max-width: 100%;if you only want the image to scale on large windows.
max-width: 100%;如果您只想在大窗口上缩放图像，您也可以尝试。
回答by fahomid
Set the div class which will not show any extra parts.
设置不会显示任何额外部分的 div 类。
div {
overflow: hidden;
}
回答by NICK
These settings worked perfect for me.. it will size ur photo for all pics..
这些设置对我来说很完美..它会为所有照片调整你的照片大小..
#headerBg {
position: absolute;
top: 0px;
left: 0px;
right: 0px;
width: 100%;
height: 100%;
}
}
回答by mxniu
Just make the header background image the true background of that div. Float does not ignore other objects the way that position: absolute does.
只需将标题背景图像设为该 div 的真实背景即可。Float 不会像 position: absolute 那样忽略其他对象。
#header {
height: 130px;
margin: 5px 5px 0 5px;
border: #0f0f12 outset 2px;
border-radius: 15px;
background: url(headerBg.jpg);
}
回答by Thomas Ludewig
<!DOCTYPE html>
<html>
<head>
<title>W3.CSS</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta content="text/html; charset=iso-8859-2" http-equiv="Content-Type">
<!--link rel="stylesheet" href="#"-->
<style>
.mySlides {
display: none;
}
.header {
background-color: #f1f1f1;
padding: 30px;
text-align: center;
height: 195px;
display: flex;
align-items: center;
align-items: center;
justify-content: center;
}
.img2 {
float: center;
display: inline-block;
}
</style>
<style type="text/css">
.c4 {
max-width: 500px
}
.c3 {
width: 100%
}
.c2 {
display: inline-block;
text-align: center;
width: 100%;
}
.c1 {
max-width: 100%;
height: auto;
}
</style>
</head>
<body>
<h2 class="c2">Automatic Slideshow</h2>
<div id="header" class="c2">
<img class="img2 c1" src="./img/16px/avi.png" alt="Pineapple">
<h1 class="c2">
<a href="#">I want to be</a>
</h1>
<div class="c4">
<img id="carousel" src="" class="c3">
</div>
</div>
<script>
//set up things
var images = [];
images[0] = "./img/16px/avi.png";
images[1] = "./img/16px/bmp.png";
images[2] = "./img/16px/cpp.png";
var n = images.length - 1;
var carouselimg = document.getElementById("carousel");
var header = document.getElementById("carousel");
// preload all images
carouselimg.style.display = "none";
for (var i = 0; i < n; i++) {
carouselimg.src = images[i];
}
carouselimg.style.display = "block";
//prepare first round
var carouselIndex = 0;
// start show
rotate();
function rotate() {
var dr = header.getBoundingClientRect();
carouselimg.style.width = dr.width;
carouselimg.src = images[carouselIndex];
//index is a global variable
//so its state will be kept and we can load the first / next image
carouselIndex++;
// increment image array index
if (carouselIndex > n) {
// do we rech the end
carouselIndex = 0
// start from begin
}
setTimeout(rotate, 2000);
// restart rotation every 2 seconds
}
</script>
</body>
</html>
回答by Anmol Maheshwari
try using in your css:
尝试在你的 css 中使用：
max-height:100%;
