拉伸背景图像以占据 div 的整个高度

Question

I've divided screen to 2 parts and want to have same height for both the divs.我已将屏幕分为 2 部分，并希望两个 div 具有相同的高度。

What I want is left side div should have same height and should occupy the height same as right part.我想要的是左侧 div 应该具有相同的高度，并且应该占据与右侧相同的高度。

When I see this screen in mobile format it is not showing proper.当我以移动格式看到此屏幕时，它显示不正确。

I tried using height 100% but not working.我尝试使用高度 100% 但不起作用。 What am I missing over here?我在这里错过了什么？

This is what I've tried.这是我试过的。 Link to codepen代码笔链接

 #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>

Answer 1

I found this (I cheat a little by given a fix size to the div : myDiv , who has the background-image because I think that background-image doesn't have size):我发现了这个（我通过给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>

拉伸背景图像以占据 div 的整个高度

问题描述

1 个解决方案

解决方案1
0 2020-11-06 11:38:42

拉伸背景图像以占据 div 的整个高度

问题描述

1 个解决方案

解决方案1 0 2020-11-06 11:38:42

解决方案1
0 2020-11-06 11:38:42