que - tamaño imagen proporcional html 5
¿Cambia los tamaños de imagen proporcionalmente usando CSS? (6)
Hace un par de días que intento configurar mi galería de miniaturas para que todas las imágenes tengan el mismo ancho y alto. Sin embargo, cuando cambio el código Css a,
max-height: 150px;
max-width: 200px;
width: 120px;
height: 120px;
Obtengo imágenes del mismo tamaño, pero la relación de aspecto se alarga arruinando las imágenes. ¿No hay una forma de cambiar el tamaño del contenedor de imagen y no la imagen en su lugar? permitiéndome mantener la relación de aspecto. pero cambie el tamaño de la imagen aún. (No me importa si corté parte de la imagen).
¡Gracias por adelantado!
Necesita corregir un lado (por ejemplo, altura) y establecer el otro en auto .
P.ej
height: 120px;
width: auto;
Eso escalaría la imagen basada en un solo lado. Si encuentra que recortar la imagen es aceptable, puede simplemente configurar
overflow: hidden;
al elemento padre, que recortaría cualquier cosa que de otro modo excedería su tamaño.
Para hacer que las imágenes sean ajustables / flexibles, puede usar esto:
/* fit images to container */
.container img {
max-width: 100%;
height: auto;
}
Ponlo como fondo en tu soporte, por ejemplo
<div style="background:url(path/to/image/myimage.jpg) center center; width:120px; height 120px;">
</div>
Esto centrará su imagen dentro de un div 120x120 cortando cualquier exceso de la imagen
Puede usar la propiedad object-fit css3, algo así como
<!doctype html>
<html>
<head>
<meta charset=''utf-8''>
<style>
.holder {
display: inline;
}
.holder img {
max-height: 200px;
max-width: 200px;
object-fit: cover;
}
</style>
</head>
<body>
<div class=''holder''>
<img src=''meld.png''>
</div>
<div class=''holder''>
<img src=''twiddla.png''>
</div>
<div class=''holder''>
<img src=''meld.png''>
</div>
</body>
</html>
No es exactamente su respuesta, sin embargo, porque no estira el contenedor, pero se comporta como la galería y puede seguir diseñando el img mismo.
Otro inconveniente de esta solución sigue siendo un soporte deficiente de la propiedad css3. Más detalles están disponibles aquí: http://www.steveworkman.com/html5-2/javascript/2012/css3-object-fit-polyfill/ . La solución de jQuery se puede encontrar allí tambié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 hay manera 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 redimensioné el ancho.
Si el contenedor tiene una dimensión especificada (en mi ejemplo, el ancho), cuando le pidas a la imagen que tenga el ancho al 100%, se convertirá en el ancho completo del contenedor. El auto en la altura hará que la imagen tenga la altura proporcional al nuevo ancho.
Ex:
HTML:
<div class="container">
<img src="something.png" />
</div>
<div class="container">
<img src="something2.png" />
</div>
CSS:
.container {
width: 200px;
height: 120px;
}
/* resize images */
.container img {
width: 100%;
height: auto;
}
si conoces la relación de aspecto, puedes usar el margen inferior con porcentaje para establecer la altura dependiendo de la diferencia.
<div>
<div style="padding-bottom: 33%;">
i have 33% height of my parents width
</div>
</div>