CSS: Was verursacht diese Lücke?

Question

Bei this page, um Darstellungsbreite 870px, gibt es eine Lücke, die unter jedem .program-image img erscheint:

Wie kann ich jede .program-image img sicherzustellen, die Höhe jedes .program oder jede .program ist die Höhe jedes .program-image img?

Hilfe geschätzt.

Answer 1

Da die Bildhöhe von ihrer Breite abhängt, wird aufgrund dieser Regel eine Lücke erzeugt. Um dies zu vermeiden, füge ich das Bild im Allgemeinen als Hintergrundbild eines div hinzu und setze die Hintergrundgröße auf deckung (wodurch das Bild das gesamte div bedeckt).

Zuerst entfernen Sie das Bild-Tag und legen Sie das Hintergrundbild innerhalb der Programm-Bild div.

<div class="program"> 
    <div class="program-image" style="background-image:url('http://vmpersonal.com/wp-content/uploads/2017/02/program-pregnancy.jpg');"> 
     ... 

Dann würde ich gehen Sie vor den folgenden CSS hinzufügen:

.program-image { 
    height: 90px; // Or whatever height needed 
    width: 45.23809523%; 
    float: left; 
    max-height: auto; 
    background-size: cover; 
    background-position: center; 
    background-repeat: no-repeat; 
} 

Hier wird die Höhe des div, da sie nicht berücksichtigt die Höhendimension des Bildes stattfinden wird.

Um sicherzustellen, dass das Bild nicht über das Programmelement überläuft. Fügen Sie die folgenden:

.program { 
    overflow: hidden; 
} 

Unten ist ein Beispiel dafür, wie es aussieht (Zweite Programm ist, wie es derzeit ist, beispielsweise schließt background-position: center Entschuldigungen).

Ich hoffe, das hilft.

Answer 2

<img> Markierung ist inline-block Element, so dass Sie immer vertical-align dafür definieren müssen. sonst mach es blockieren.

img { 
    vertical-align: top; 
} 

oder benutzen Sie diese

img { 
    display: block; 
} 

Answer 3

Vielleicht versuchen:

height: 100%; 

oder

min-height: 100%; 

auf dem Bildauswahl.