¿Cómo puedo hacer que las imágenes quepan en un cuadro cuadrado de 200 píxeles utilizando CSS?

Question

Tengo un montón de imágenes que caben en una caja de 400px × 400px (es decir, una de sus dimensiones es 400px y la otra es más pequeña). Me gustaría poder, usando CSS, pero jquery/javascript si es necesario, ajustar esa imagen a un cuadro de 200px por 200px, de modo que dos bordes de la imagen toquen el cuadro, y haya un espacio entre los otros dos bordes de la caja. Se debe mantener la relación de aspecto.

Mi HTML es el siguiente:

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

Y mi CSS es:

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; 
} 

Se puede ver una muestra here.

Desafortunadamente, mis imágenes de paisaje se encuentran en la parte superior de la caja, mientras que me gustaría que estén centradas. Además, no estoy seguro de las personas sensatas de confiar en max-width/max-height.

¿Cómo puedo centrar mis imágenes en estas cajas?

Answer 1

Configuré esto en mi computadora y funcionó bien. Después de mirar su página de ejemplo, el problema se debe a que ha configurado la imagen en display:block. O bien eliminar la regla de su regla general img (cosa rara para establecer de forma global, de todos modos), o cambiar la regla de imagen que envió por encima de esto:

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

Por defecto, el elemento img y otros elementos "sustituidos" (Flash, etc.) son "en línea", esto significa que fluyen en línea como texto, pero tienen ancho y alto.

Answer 2

¿Ha intentado utilizar:

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

que debe centrar elementos de bloque

Answer 3

que tenía que hacer lo mismo hace algún tiempo, y me pareció una buena implementación en this link. "Centre una imagen dentro de un div, vertical y horizontal, sin conocer el tamaño de la imagen".

Funciona para mí según lo previsto.

Answer 4

me encontré con este problema centrado vertical de una vez y para conseguir que funcione correctamente en todos los navegadores, recurrí a 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'); 
    }); 
}); 

Tenga en cuenta que necesitará $ (ventana) en lugar de .load $ (documento). listo si las dimensiones de la imagen no están dadas en html.

Answer 5

Aquí hay una solución que funcionará sin importar el tamaño que desee. Se reducirá pero no exclusivo, se centrará tanto vertical como horizontalmente, y solo usará CSS. Me tomó un tiempo darme cuenta.

Ponga su <img> dentro de un <div>, luego coloque el div como desee (es decir, Darle el tamaño que desee, asegúrese de establecer el atributo position), a continuación, aplicar la siguiente:

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