Bild in eine Box machen

Question

Ich habe eine Grenze von 100px/100px mit dem Namen von Firmen daneben. Das Firmenlogo muss in dieses Feld passen. Die Logos sind in verschiedenen Größen erhältlich.

Ich habe den folgenden Code.

.logo-border { 
    width: 100px; 
    height: 100px; 
    border: 1px solid #eee; 
    background: #fff; 
    padding: 5px; 
} 
.company-logo { 
    height: auto; 
    width: 100%; 
} 

HTML-Code

<div class="logo-border"> 
    <img class="company-logo" src="/images/abc.png"> 
</div> 

Dies macht das Bild an der Spitze der Box erscheinen.

Wenn ich object-fit: contain; in der Firma-Logo-Klasse hinzufügen, funktioniert es gut. Aber "Objekt-Fit" funktioniert nicht im Internet Explorer.

Haben versucht, Position zu verwenden. Aber das hat auch nicht funktioniert. Bitte helfen Sie mir!

Vielen Dank im Voraus.

Answer 1

Verwendung dieses css

.logo-border { 
    width: 100px; 
    height: 100px; 
    border: 1px solid #eee; 
    background: #fff; 
    padding: 5px; 
    display:table; 
    text-align:center; 
} 
.company-logo { 
    height: auto; 
    width: 100%; 
    display:table-cell; 
    vertical-align:middle; 
} 

Diese vertikal und horizontal ausrichten Zentrieren als mit Tabelleneigenschaft Sie vertical-align:middle vertikal ausrichten und text-align:center ist für horizontal align

Answer 2

Sehen Sie diesen Code

verwenden können Ich habe hinzugefügt Anzeige: Tischzelle; vertikal ausgerichtet: Mitte; text-align: center

Und es funktioniert jetzt gut.

.logo-border { 
 
    width: 100px; 
 
    height: 100px; 
 
    border: 1px solid #eee; 
 
    background: #fff; 
 
    padding: 5px; 
 
    display:table-cell; 
 
    vertical-align:middle; 
 
    text-align:center; 
 
} 
 
.company-logo { 
 
    height: auto; 
 
    width: 100%; 
 
}

<div class="logo-border"> 
 
    <img class="company-logo" src="http://2.bp.blogspot.com/-wECsXJqZ_I0/VDmPRlNa_MI/AAAAAAAAIfQ/UbS33drV1qo/s1600/car%2Blogo%2Bpicture%2B3.png"> 
 
</div>