拉伸背景图像以占据div

我已经将屏幕划分为两部分，并希望两个div的高度相同。

我想要的是左侧div应该有相同的高度，并且应该占据与右侧部分相同的高度。

当我看到这个手机格式的屏幕时，它显示不正确。

我试着100%使用身高，但没有成功。我在这里错过了什么？

这就是我尝试过的。链接到代码笔

#main_header_div{
color: white;
position: absolute;
width: 100%;
height: inherit;
top: 0;
background-color: rgba(152, 38, 38, 0.7);
color:white;
}
#div_1_text {
margin-top: 15%;
margin-left: 15%;
color: white;
}
#div_2_text {
margin-top: 5%;
margin-left: 15%;
color: white;
}
#div_3_text {
margin-left: 15%;
color: white;
}
#div_4_button {
margin-left: 15%;
color: white;
}

<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">  
</head>
<body>
<div class="row">
<div class="col-md-6" style="padding-right: 0; padding-left: 0;">
<div class="jumbotron jumbotron-fluid" style="height:100%; background : url('https://live.staticflickr.com/65535/50566935741_ba2c76c194_b.jpg');">
<div id="main_header_div">
<h3 id="div_1_text">Image Taken From Flickr !</h3>
<p id="div_2_text">For DEMO</p>
<p id="div_3_text">TEXT 3</p>
<button id="div_4_button" type="button" class="btn btn-outline-secondary">BUTTON</button>
</div>
</div>
</div>
<div class="col-md-6" style="padding-right: 0; padding-left: 0;">
<div style="width:100%;">
<img class="image-responsive" src="https://live.staticflickr.com/65535/50566935741_ba2c76c194_b.jpg" />
</div>
</div>
</div>
</body>
</html>

我发现了这一点(我通过给div:myDiv一个固定的大小来作弊，因为我认为背景图像没有大小(：

.myDiv{
height: 680px; /*manual check to get image height*/
}
#main_header_div{
color: white;
position: absolute;
width: 100%;
height: inherit;
top: 0;
background-color: rgba(152, 38, 38, 0.7);
}
#div_1_text {
margin-top: 15%;
margin-left: 15%;
color: white;
}
#div_2_text {
margin-top: 5%;
margin-left: 15%;
color: white;
}
#div_3_text {
margin-left: 15%;
color: white;
}
#div_4_button {
margin-left: 15%;
color: white;
}

<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">  
</head>
<body>
<div class="row">
<div class="col-md-6" style="padding-right: 0; padding-left: 0;">
<div class="jumbotron jumbotron-fluid myDiv" style="background : url('https://live.staticflickr.com/65535/50566935741_ba2c76c194_b.jpg');">
<div id="main_header_div">
<h3 id="div_1_text">Image Taken From Flickr !</h3>
<p id="div_2_text">For DEMO</p>
<p id="div_3_text">TEXT 3</p>
<button id="div_4_button" type="button" class="btn btn-outline-secondary">BUTTON</button>
</div>
</div>
</div>
<div class="col-md-6" style="padding-right: 0; padding-left: 0;">
<div style="width:100%;">
<img class="image-responsive" src="https://live.staticflickr.com/65535/50566935741_ba2c76c194_b.jpg" />
</div>
</div>
</div>
</body>
</html>

相关内容

最新更新

热门标签：