Mantén la atención ya que en esta crónica vas a encontrar el arreglo que buscas.Esta crónica fue aprobado por nuestros expertos para garantizar la calidad y exactitud de nuestro contenido.
Solución:
este es un problema conocido con el cambio de tamaño de CSS, a menos que todas las imágenes tengan la misma proporción, no tiene forma de hacerlo a través de CSS.
El mejor enfoque sería tener un contenedor y cambiar el tamaño de una de las dimensiones (siempre la misma) de las imágenes. En mi ejemplo, cambié el tamaño del ancho.
Si el contenedor tiene una dimensión específica (en mi ejemplo, el ancho), al decirle a la imagen que tenga el ancho al 100%, tendrá el ancho completo del contenedor. El auto at the height hará que la imagen tenga la altura proporcional al nuevo ancho.
Ex:
HTML:
CSS:
.container
width: 200px;
height: 120px;
/* resize images */
.container img
width: 100%;
height: auto;
Debe fijar un lado (por ejemplo, altura) y configurar el otro para auto.
P.ej
height: 120px;
width: auto;
Eso escalaría la imagen en función de un solo lado. Si encuentra aceptable recortar la imagen, simplemente puede configurar
overflow: hidden;
al elemento principal, que recortaría todo lo que de otro modo excedería su tamaño.
Puedes usar object-fit propiedad css3, algo como
Sin embargo, no es exactamente su respuesta, ya que no estira el contenedor, pero se comporta como la galería y puede seguir diseñando el img sí mismo.
Otro inconveniente de esta solución sigue siendo un soporte deficiente de la propiedad css3. Hay más detalles disponibles aquí: http://www.steveworkman.com/html5-2/javascript/2012/css3-object-fit-polyfill/. La solución jQuery también se puede encontrar allí.
Si posees algún recelo y disposición de progresar nuestro enunciado eres capaz de escribir una explicación y con placer lo interpretaremos.