Kann ich die Höhe eines Bildes in einem Jumbotron auf die Höhe des Jumbotrons beschränken?

Question

Ich bin mir nicht sicher, ob die Frage klar genug war, vielleicht hilft ein Blick auf die Website.

http://settlecars.com

Ich möchte das Bild der drei Autos auf der rechten Seite innerhalb von die gleiche Höhe wie die jumbotron bleiben, wenn der Bildschirm der Größe geändert wird (oder wenn kleinere Bildschirmgeräte Anzeige auf, zB: Smartphones). Wie kann ich das machen?

Derzeit ist dies der html ich für diesen Abschnitt der Website an der richtigen Stelle:

<div class="jumbotron text-left"> 
    <h1>Liverpool Vehicle Hire</h1> 
    <p>The one stop shop for all your private hire needs <br> in the Sefton &amp; Liverpool areas.</p> 
    <img src="header.png" height="357px" align="right" style="position:absolute; top: 30px; right:0px; z-index:0"> 
</div> 

Answer 1

Der einfachste Weg, dies zu erreichen, ist eine overflow:hidden; Eigenschaft auf Ihrem .jumbotron Element einzustellen.

Aufgrund der Tatsache, dass Ihre Auto Bilder position:absolute; verwenden, müssen Sie auch das .jumbotron Element eine position:relative; geben, um das Bild zu verankern.

Fügen Sie einfach diese zu Ihrem CSS:

.jumbotron { 
    overflow: hidden; 
    position: relative; 
} 

bearbeiten

Wenn ich diese mit Firebug auf Ihrer Website getestet es völlig in Ordnung war, aber wenn Sie es noch danach zwicken, Sie können folgende hinzufügen:

.jumbotron > img { 
    height:100%; 
} 

Dank der position:relative; Verankerung des Bildes dieses das Bild zwingt er Licht in die .jumbotron Höhe.