Ancho y Alto variable pero siempre al xxPX

[manolo_manolo]

Hola, necesito mostrar en una capa de alto y anchos fijos imágenes totalmente variables pero siempre que quede bien y en orden.

Que ajuste el alto al 100% y el ancho lo centre o al revés.

POR EJEMPLO: En un div de 600px de Ancho x 400px de Alto, las imágenes se mostrarían así:

• Imagen de 600x800 = Alto de 400px y ancho 300px y centrada horizontalmente.
• Imagen de 1200x400 = Ancho de 600px y alto 200px y centrada verticalmente.
• Imagen de 300x200 = Ancho de 600px y alto 400px.
• Imagen de 1200x800 = Ancho de 600px y alto 400px.
• ...

He hecho mil y un inventos pero no consigo que funcione, cuando entra una falla la otra... min-width, width, max-width, min-height, height, max-height,... no me aclaro, por favor alguien que me pueda ayudar??

GRACIAS!!!!!!!

[Atomycko]

creo que la mejor solucion para eso es usar jQuery, o si usas php manejar imagen antes de imprimir, porque con css lo que se puede hacer es ajustarl las imagenes al ancho o alto y ajustar el contenedor a "overflow: scroll"

[comablck]

te recomiendo utilices el ancho o alto que requiera tu div para las imagenes de esta forma se centraria sin problemas.. en dado caso se desborde la imagen del div, recorda usar overflow:hidden, para cortar ese desborde..

div.horizontal {
display: flex;
justify-content: center;
}
div.vertical {
display: flex;
flex-direction: column;
justify-content: center;
}


<div class="horizontal div1">
<div class="vertical">
<img src="imagen.jpg" />
</div>
</div>

--
Entra a mi canal en Youtube para ver tutoriales utiles de desarrollo front-end.
https://www.youtube.com/channel/UCsH...wdzUTNNWqwPDsg

[manolo_manolo]

Con overflow hidden es como lo estoy haciendo ahora mismo pero no quiero que se pierda nada de las imágenes.

Me va a tocar analizarlas antes con PHP y luego aplicarle los estilos necesarios.


Esto creo que es un punto que aún tiene pendiente CSS3...

Gracias de todos modos!!

[comablck]

tendrias que determinar el alto de tus imagenes por igual, es decir.. darle desde css al img un max-height para que no crezcan mas de lo q le especifiques.. asi todas no pasarian de ese alto y con el codigo que te puse bien se centraria sin importar las dimensiones.


--
Entra a mi canal en Youtube para ver tutoriales utiles de desarrollo front-end.
https://www.youtube.com/channel/UCsH...wdzUTNNWqwPDsg

[manolo_manolo]

Ok, voy a verlo, gracias por la ayuda crack!