Wie kann ich Bilder mithilfe von CSS in eine 200-Pixel-Quadrat-Box einfügen?

Question

Ich habe eine Reihe von Bildern, die alle in eine 400px × 400px Box passen (das heißt, eine ihrer Dimensionen ist 400px und die andere ist kleiner). Ich würde gerne in der Lage sein, mit CSS, aber jquery/javascript wenn nötig, das Bild auf eine 200px um 200px Box, so dass zwei Kanten des Bildes die Box zu berühren, und es gibt eine Lücke zwischen den anderen beiden Kanten von die Kiste. Seitenverhältnis muss beibehalten werden.

Mein HTML ist wie folgt:

<div class="small"> 
    <img src="/images/photos/View.jpg" alt="View" /> 
</div> 

Und mein CSS ist:

div.images div.small 
{ 
    width:200px; 
    height:200px; 
    line-height:200px; 
    text-align:center; 
} 
div.images div.small img 
{ 
    vertical-align:middle; 
    max-width:200px; 
    max-height:200px; 
} 

Sie here eine Probe zu sehen.

Leider umarmen meine Landschaftsbilder das obere Ende der Box, während ich möchte, dass sie zentriert sind. Ich bin mir auch nicht sicher, ob die Wissenden sich auf max-width/max-height verlassen.

Wie kann ich meine Bilder in diesen Feldern zentrieren? mit

Answer 1

Ich habe dies auf meinem Computer eingerichtet und es hat gut funktioniert. Nach dem Betrachten Ihrer Beispielseite liegt das Problem daran, dass Sie das Bild auf display:block festgelegt haben. Entfernen Sie entweder diese Regel aus dem allgemeinen img Regel (Seltsame global zu setzen, sowieso), oder das Bild Regel ändern Sie oben gepostet:

div.images div.small img 
{ 
    vertical-align: middle; 
    max-width: 200px; 
    max-height: 200px; 
    display: -moz-inline-box; /* Firefox 2 */ 
    display: inline-block; 
} 

standardmäßig das img Element und andere „ersetzt“ Elemente (Flash, etc) sind "Inline-Block" - das bedeutet, sie fließen inline wie Text, haben aber eine Breite und Höhe.

Answer 2

haben Sie versucht:

display:block; 
margin-left:auto; 
margin-right:auto; 

, die Elemente auf Blockebene

Answer 3

ich vor einiger Zeit das gleiche tun musste Zentrum sollte, und ich fand eine gute Umsetzung in this link. "Zentrieren Sie ein Bild in einem div, vertikal und horizontal, ohne die Bildgröße zu kennen".

Es funktioniert für mich wie vorgesehen.

Answer 4

ich in diese vertikale Zentrierung Problem lief einmal und in allen Browsern es richtig funktioniert werden, griff ich zu Javascript/jQuery:

$(document).ready(function() { 
    $('img').each(function() { 
     image_height = $(this).height(); 
     margin_top = (200 - image_height)/2; 
     $(this).css('margin-top', margin_top + 'px'); 
    }); 
}); 

Bitte beachten Sie, dass Sie $ benötigen (Fenster) .load statt $ (document) .ready, wenn die Bildmaße nicht im HTML-Format angegeben sind.

Answer 5

Hier ist eine Lösung, die funktioniert, egal welche Größe Sie wollen. Es wird herunterskaliert, aber nicht hochskaliert, vertikal und horizontal zentriert und verwendet nur CSS. Ich brauchte eine Weile, um es herauszufinden.

Setzen Sie Ihre <img> in eine <div>, dann positionieren Sie die Div wie Sie wollen (d. H., Gibt ihm die Größe, die Sie mögen, stellen Sie sicher, dass das position Attribut) setzen, dann dies gilt:

.mydiv > .myimg { 
    vertical-align: bottom; 
    max-height:  100%; 
    max-width:  100%; 
    position:  absolute; 
    margin:   auto; 
    top:   0; 
    right:   0; 
    bottom:   0; 
    left:   0; 
}