Miniaturas de imagen de CSS puro

Question

Quiero mostrar una colección de miniaturas de imágenes en una grilla. Las imágenes vendrán en una variedad de tamaños, pero me gustaría restringir las miniaturas a un tamaño particular (digamos 200px ancho y 150px alto).

Lo que me gustaría encontrar algunas reglas de marcado HTML y CSS mágico que

1. Permitir que las imágenes que se incluirán en <img> elementos normales
2. Asegúrese de que las miniaturas encajan en su caja de 200x150 píxeles , conservan sus proporciones y se centran en cualquier dimensión que desborden.
3. no requiere JavaScript o conocimiento específico de las dimensiones reales de cada imagen

No estoy seguro de si esto es posible. Puedo hacer una (mala) aproximación de lo que quiera con el siguiente marcado:

<div class="thumb"> 
    <img src="360x450.jpeg"> 
</div> 

y CSS:

.thumb { 
    width: 200px; 
    height: 150px; 
    overflow: hidden; 
} 
.thumb img { 
    min-width: 200px; 
    min-height: 150px; 
    width: 200px; 
} 

rompe este intento en una variedad de maneras:

1. Las imágenes que están en orientación vertical se dimensionarán correctamente, pero se desbordarán por la parte inferior del contenedor, lo que producirá un recorte verticalmente descentrado.

2. Las imágenes que son anchas y cortas se distorsionarán en la dimensión horizontal debido a las reglas codificadas width y min-height.

3. Pero sin ese código fijo width, las imágenes que son más grandes que la altura y el ancho mínimos no se redimensionarán en absoluto.

Si es del todo útil, He puesto un ejemplo que (esperemos) ilustran lo que estoy tratando de hacer, aquí:

• http://overloaded.org/tmp/imgtest/
• http://overloaded.org/tmp/imgtest/imgtest.zip

Sé que puedo resolver este problema omitiendo por completo el elemento <img> y en su lugar, tirando de las miniaturas como una imagen de fondo centrada en el cont elemento principal, pero, si es posible, me gustaría mantener los elementos <img> en la página.

¡Gracias por cualquier ayuda o sugerencias que pueda proporcionar!

Editar: supongo que debería señalar que una solución ideal funcionará en IE 6 + y los navegadores modernos, pero cualquier solución que funciona en IE 9+ y otros navegadores modernos (WebKit reciente, Gecko, etc.) ser felizmente aceptado

Answer 1

Posible, probablemente.

Además, probablemente no sea la mejor idea. Su gran problema para superar aquí es la orientación de las miniaturas.¿Qué pasa si estás lidiando con un panorama? Ciertamente, reducirlo creará una imagen "aplastada" muy antiestética, al igual que una imagen muy alta. Es raro que todos traten en 4X3 o 16X9 el 100% del tiempo. Entonces, necesitarás un mecanismo para rellenar la imagen. Incluso si la proporción es correcta, no va a cambiar el tamaño lo más limpiamente posible con un programa como Photoshop o Gimp.

El otro problema importante en este proceso de pensamiento es que va a enviar grandes cantidades de datos innecesarios al servidor a través de las imágenes más grandes. Llevará más tiempo cargar, llenar el DOM innecesariamente y, en general, inhibir la experiencia de UI.

Existen varias formas de evitar esto, ninguna de ellas pura CSS. He abordado esto varias veces, cada uno de una manera única basada en el cliente. Para un cliente que quería cosas totalmente personalizadas, era una herramienta de carga personalizada, cambio de tamaño a través de iMagick (parte de la magia de la imagen) y CSS/Javascript personalizado para el álbum con mayor interactividad. En otra instancia, uso Gallery como el backend - manejo de la creación de miniaturas, carga, titulación, recorte y organización - y luego saqué los enlaces de imagen reformateados del DB para mostrarlos de una manera más atractiva. Podría ahorrarse aún más problemas y simplemente usar algo como la API de Flickr para extraer imágenes para su uso.

Aquí está un Tut en using ImageMagick to do thumbnails.

Answer 2

Puede (tipo de) lograr esto con las adiciones de CSS3 background-size: contain y cover.

Live Demo

• contain (imagen superior) se ajusta a la imagen entera, manteniendo la relación de aspecto. Nada está recortado.

• cover (imagen inferior) llena el elemento contenedor ya sea vertical u horizontalmente (según la imagen) y recorta el resto.

Answer 3

intenta establecer un máximo de ancho, la altura y no min porque si la imagen no es exactamente ese tamaño que se desbordará :)

Answer 4

.thumb img { 
    max-width: 200px; 
    max-height: 150px; 
    min-width: 200px; 
    min-height: 150px; 
} 

Bien sé que para los pulgares Lo querría máximo y mínimo si desea una imagen más pequeña para que sea más y más grande para que sea más pequeña.