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.Wie kann ich Bilder mithilfe von CSS in eine 200-Pixel-Quadrat-Box einfügen?
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
Nur habe ich in der Lage vertikale Zentrierung zu tun ist, um die Größe der Eltern und die Größe der berechnen Kind und dann legen Sie die Position des Kindes relativ zu dem Eltern, so dass es zentriert ist. Max-Width & Max-Weight sind in Ordnung, wenn die Browser, auf die sie ausgerichtet sind, diese unterstützen. – JoshBerke