Responsive Inhalt entspricht Bildhöhe

Question

Die Seite ist in zwei Abschnitte unterteilt. Responsive Bild auf der linken Seite und mein Inhalt geht nach rechts. Ich möchte nur festlegen, dass die Höhe des Inhaltsbereichs bei jeder Auflösung der Bildhöhe entspricht. (Nicht in der mobilen Version) Aber im Moment sieht es so aus. Ich habe mit diesen Codes versucht.

img { 
 
width:100%; 
 
} 
 

 
.about-section { 
 
height: 450px; 
 
} 
 
.about-content { 
 
padding: 60px; 
 
height: 100%; 
 
display: table; 
 
background: #efefef; 
 
} 
 
.inner { 
 
display: table-cell; 
 
vertical-align: middle; 
 
} 
 
.nopadding { 
 
    padding: 0 !important; 
 
    margin: 0 !important; 
 
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"> 
 

 
<div class="container-fluid"> 
 
\t \t \t <div class="row"> 
 
\t \t \t \t <div class="col-md-6 nopadding"> 
 
\t \t \t \t \t <img src="https://c.tadst.com/gfx/750x500/computer-key-about-help.jpg?1" alt=""> 
 
\t \t \t \t </div> 
 
\t \t \t \t <div class="col-md-6 about-section nopadding"> 
 
\t \t \t \t \t <div class="about-content"> 
 
\t \t \t \t \t \t <div class="inner"> 
 
\t \t \t \t \t \t \t <h3>WE BREATHE WEB TECHNOLOGY</h3> 
 
\t \t \t \t \t \t \t <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam dictum venenatis diam, et tempor est maximus a. Duis malesuada Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam dictum venenatis diam, et tempor est maximus a. Duis malesuada Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam dictum venenatis diam, et tempor est maximus a. Duis malesuada Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam dictum venenatis diam, et tempor est maximus a. Duis malesuada Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam dictum venenatis diam, et tempor est maximus a. Duis malesuada Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam dictum venenatis diam, et tempor est maximus a. Duis malesuada</p> 
 
\t \t \t \t \t \t </div> 
 

 
\t \t \t \t \t </div> 
 
\t \t \t \t </div> 
 
\t \t \t </div> 
 
\t \t </div>

Answer 1

Ist Ihr Ziel, den Hintergrund, dass graue Farbe behalten zu haben? Wenn ja, gibt es einen ziemlich einfachen Weg: Verschieben background: #efefef; zu .row. Oder wenn Sie eine größere Spezifität benötigen (z. B. wenn Sie auf der Seite andere Instanzen von .row haben), fügen Sie einfach eine zusätzliche Klasse zum <div class="row"> Element hinzu und wenden Sie diese background Eigenschaft darauf an.

Answer 2

Versuchen Sie, einen Inhalt von padding-bottom hinzuzufügen, und ändern Sie dann möglicherweise die Schriftgröße Ihrer Wörter. Ich weiß nicht, ob es funktionieren wird, weil ich dein Image nicht habe, aber ich denke, du solltest es versuchen. Ich hoffe du findest was du suchst.

Answer 3

Fügen Sie einfach einen negativen Rand zu Ihren Spalten hinzu. Die Spaltenhöhen werden gleich.

.row{ 
overflow: hidden; 
    } 


[class*="col-"]{ 
margin-bottom: -99999px; 
padding-bottom: 99999px; 
} 

Arbeitsbeispiel

img { 
 
width:100%; 
 
} 
 

 
.about-section { 
 
height: 450px; 
 
} 
 
.about-content { 
 
padding: 60px; 
 
height: 100%; 
 
display: table; 
 
background: #efefef; 
 
} 
 
.inner { 
 
display: table-cell; 
 
vertical-align: middle; 
 
} 
 
.nopadding { 
 
    padding: 0 !important; 
 
    margin: 0 !important; 
 
} 
 
.row{ 
 
    overflow: hidden; 
 
} 
 

 
[class*="col-md-6"]{ 
 
    margin-bottom: -99999px; 
 
    padding-bottom: 99999px; 
 
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"> 
 

 
<div class="container-fluid"> 
 
\t \t \t <div class="row"> 
 
\t \t \t \t <div class="col-md-6 nopadding"> 
 
\t \t \t \t \t <img src="https://c.tadst.com/gfx/750x500/computer-key-about-help.jpg?1" alt=""> 
 
\t \t \t \t </div> 
 
\t \t \t \t <div class="col-md-6 about-section nopadding"> 
 
\t \t \t \t \t <div class="about-content"> 
 
\t \t \t \t \t \t <div class="inner"> 
 
\t \t \t \t \t \t \t <h3>WE BREATHE WEB TECHNOLOGY</h3> 
 
\t \t \t \t \t \t \t <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam dictum venenatis diam, et tempor est maximus a. Duis malesuada Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam dictum venenatis diam, et tempor est maximus a. Duis malesuada Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam dictum venenatis diam, et tempor est maximus a. Duis malesuada Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam dictum venenatis diam, et tempor est maximus a. Duis malesuada Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam dictum venenatis diam, et tempor est maximus a. Duis malesuada Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam dictum venenatis diam, et tempor est maximus a. Duis malesuada</p> 
 
\t \t \t \t \t \t </div> 
 

 
\t \t \t \t \t </div> 
 
\t \t \t \t </div> 
 
\t \t \t </div> 
 
\t \t </div>

note

können Sie Flexbox Ansatz verwenden, aber das wird die Reaktionsfähigkeit Ihrer Seite brechen.

Refer to this question

Answer 4

Bilder in dieser ansprechenden Art und Weise nicht funktionieren, so sind Sie besser dran mit einem Hintergrundbild verwenden. Stellen Sie eine Mindesthöhe auf dem Bild div so ein, dass immer noch auf kleinen Bildschirmen angezeigt wird. Verwenden Sie flexbox, um die Zeile dieselbe Höhe zu machen.

Demo: http://www.codeply.com/go/iBjwmWLmWT

.img { 
    background-image:url(https://c.tadst.com/gfx/750x500/computer-key-about-help.jpg?1); 
    background-size: cover; 
    background-repeat: no-repeat; 
    min-height: 270px; 
} 
.about-section { 
    background: #efefef; 
} 
.about-content { 
    padding: 15px; 
} 

@media (min-width: 992px) { 
    .row { 
     display: flex; 
    } 
} 

Demo: http://www.codeply.com/go/iBjwmWLmWT