CSS forzar el tamaño de la imagen y mantener la relación de aspecto

Estoy trabajando con imágenes, y encontré un problema con las relaciones de aspecto.

 

Como puede ver, la height y el width ya están especificados. Agregué una regla de CSS para las imágenes:

 img { max-width:500px; } 

Pero para https://stackoverflow.com/questions/12991351/css-force-image-resize-and-keep-aspect-ratio/big_image.jpg , recibo width=500 y height=600 . Cómo puedo configurar las imágenes para volver a clasificar según el tamaño, mientras mantengo sus proporciones de aspecto.

 img { display: block; max-width:230px; max-height:95px; width: auto; height: auto; } 
 

This image is originally 400x400 pixels, but should get resized by the CSS:

Las soluciones a continuación permitirán escalar y reducir la escala de la imagen , dependiendo del ancho de la casilla principal.

Todas las imágenes tienen un contenedor principal con un ancho fijo solo para fines de demostración . En producción, este será el ancho del cuadro principal.

Mejores prácticas (2018):

Esta solución le dice al navegador que represente la imagen con el máximo ancho disponible y ajusta la altura como un porcentaje de ese ancho.

 .parent { width: 100px; } img { display: block; width: 100%; height: auto; } 
 

This image is originally 400x400 pixels, but should get resized by the CSS:

He luchado bastante con este problema y finalmente llegué a esta solución simple:

 object-fit: cover; width: 100%; height: 250px; 

Puede ajustar el ancho y la altura para que se adapte a sus necesidades, y la propiedad de ajuste de objeto hará los cultivos por usted.

Aclamaciones.

La propiedad de fondo es, por ejemplo,> = 9, pero si eso le parece bien, puede usar un div con background-image y establecer background-size: contain :

 div.image{ background-image: url("your/url/here"); background-size: contain; background-repeat: no-repeat; background-position: center; } 

Ahora puedes simplemente configurar tu tamaño de div como quieras y no solo mantendrá su relación de aspecto sino que también se centralizará tanto vertical como horizontalmente dentro del div. Simplemente no te olvides de establecer los tamaños en el css ya que los divs no tienen el atributo ancho / alto en la etiqueta.

Este enfoque es diferente a la respuesta de los setecs, usando esto el área de la imagen será constante y definida por usted (dejando espacios vacíos ya sea horizontal o verticalmente dependiendo del tamaño de div y la relación de aspecto de la imagen), mientras que la respuesta de los seteos obtendrá una caja que exactamente tamaño de la imagen escalada (sin espacios vacíos).

Editar: según la documentación de fondo de MDN , puede simular la propiedad de fondo en IE8 utilizando una statement de filtro de propiedad:

Aunque Internet Explorer 8 no es compatible con la propiedad de fondo, es posible emular algunas de sus funcionalidades utilizando la función no-standard -ms-filter:

 -ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='path_relative_to_the_HTML_file', sizingMethod='scale')"; 

Elimine la propiedad “altura”.

  

Al especificar ambos, está cambiando la relación de aspecto de la imagen. Simplemente establecer uno cambiará el tamaño, pero conservará la relación de aspecto.

Opcionalmente, para restringir los sobredimensionamientos:

  

Muy similar a algunas respuestas aquí, pero en mi caso tuve imágenes que a veces eran más altas, a veces más grandes.

Este estilo funcionaba como un amuleto para asegurarse de que todas las imágenes usaran todo el espacio disponible, mantén la relación y no los cortes:

 .img { object-fit: contain; max-width: 100%; max-height: 100%; width: auto; height: auto; } 

Simplemente agregue esto a su CSS, se reducirá automáticamente y se expandirá manteniendo la relación original.

 img { display: block; max-width: 100%; max-height: 100%; width: auto; height: auto; } 

No existe una forma estándar de conservar la relación de aspecto para imágenes con width , height y max-width especificados juntos.

Por lo tanto, nos vemos obligados a especificar el width y la height para evitar que la página “salte” durante la carga de imágenes, o para usar max-width y no especificar las dimensiones para las imágenes.

Especificar simplemente el width (sin height ) normalmente no tiene mucho sentido, pero puede intentar anular el atributo HTML de height agregando una regla como IMG {height: auto; } IMG {height: auto; } en tu hoja de estilo.

Ver también el error relacionado Firefox 392261 .

https://jsfiddle.net/sot2qgj6/3/

Aquí está la respuesta si quieres poner una imagen con un porcentaje fijo de ancho , pero no un píxel fijo de ancho .

Y esto será útil cuando se trata de diferentes tamaños de pantalla .

Los trucos son

  1. Usar el padding-top para establecer la altura del ancho.
  2. Usar position: absolute para poner la imagen en el espacio de relleno.
  3. Usar max-height and max-width para asegurarse de que la imagen no sobrepase el elemento principal.
  4. usando display:block and margin: auto para centrar la imagen.

También he comentado la mayoría de los trucos dentro del violín.


También encuentro otras formas de hacer que esto suceda. No habrá una imagen real en html, por lo que permítanme la respuesta superior cuando necesito el elemento “img” en html.

CSS simple usando el fondo http://jsfiddle.net/4660s79h/2/

imagen de fondo con la palabra en la parte superior http://jsfiddle.net/4660s79h/1/

el concepto de usar posición absoluta es desde aquí http://www.w3schools.com/howto/howto_css_aspect_ratio.asp

Establezca la clase CSS de su etiqueta de contenedor de image-class :

 

y agrega esta tu hoja de estilo CSS.

 .image-full { background: url(...some image...) no-repeat; background-size: cover; background-position: center center; } 

Para mantener una imagen receptiva y, al mismo tiempo, hacer que la imagen tenga cierta relación de aspecto, puede hacer lo siguiente:

HTML:

 
image

Y SCSS:

 .ratio2-1 { overflow: hidden; position: relative; &:before { content: ''; display: block; padding-top: 50%; // ratio 2:1 } img { position: absolute; top: 0; left: 0; bottom: 0; right: 0; } } 

Esto se puede usar para imponer una determinada relación de aspecto, independientemente del tamaño de la imagen que carguen los autores.

Gracias a @Kseso en http://codepen.io/Kseso/pen/bfdhg . Verifique esta URL para obtener más ratios y un ejemplo de trabajo.

Puedes crear un div como este:

 

Y usa este CSS para darle estilo:

 height: 100%; width: 100%; background-position: center center; background-repeat: no-repeat; background-size: contain; // this can also be cover 

Puedes usar esto:

 img { width: 500px; height: 600px; object-fit: contain; position: relative; top: 50%; transform: translateY(-50%); } 

Para forzar una imagen que se ajuste a un tamaño exacto, no necesita escribir demasiados códigos. Es tan simple

 img{ width: 200px; height: auto; object-fit: contain; /* Fit logo in the image size */ -o-object-fit: contain; /* Fit logo fro opera browser */ object-position: top; /* Set logo position */ -o-object-position: top; /* Logo position for opera browser */ } 
 Logo 

Esto reducirá la imagen si es demasiado grande para un área específica (como inconveniente, no ampliará la imagen).

La solución de setec es adecuada para “Reducir para ajustar” en el modo automático. Pero, para EXPANDIR de manera óptima para que quepa en el modo “automático”, primero debe colocar la imagen recibida en una identificación de temperatura, verificar si se puede expandir en altura o en ancho (dependiendo de su relación de aspecto v / s la relación de aspecto de su bloque de visualización),

 $(".temp_image").attr("src","str.jpg" ).load(function() { // callback to get actual size of received image // define to expand image in Height if(($(".temp_image").height() / $(".temp_image").width()) > display_aspect_ratio ) { $(".image").css('height', max_height_of_box); $(".image").css('width',' auto'); } else { // define to expand image in Width $(".image").css('width' ,max_width_of_box); $(".image").css('height','auto'); } //Finally put the image to Completely Fill the display area while maintaining aspect ratio. $(".image").attr("src","str.jpg"); }); 

Este enfoque es útil cuando las imágenes recibidas son más pequeñas que el cuadro de visualización. Debe guardarlos en su servidor en tamaño pequeño original en lugar de su versión expandida para llenar su cuadro de visualización más grande para ahorrar en tamaño y ancho de banda.

 img { max-width: 80px; /* Also works with percentage value like 100% */ height: auto; } 
 

This image is originally 400x400 pixels, but should get resized by the CSS:

Let's say the author of the HTML deliberately wants the height to be half the value of the width, this CSS will ignore the HTML author's wishes, which may or may not be what you want:

¿Qué hay de usar un pseudo elemento para la alineación vertical? Este código menos es para un carrusel, pero supongo que funciona en todos los contenedores de tamaño fijo. Mantendrá la relación de aspecto e insertará barras grises oscuras en la parte superior / inferior o izquierda / escritura para la dimensión más corta. Mientras tanto, la imagen se centra horizontalmente por el texto-alineación y verticalmente por el pseudo elemento.

  > li { float: left; overflow: hidden; background-color: @gray-dark; text-align: center; > a img, > img { display: inline-block; max-height: 100%; max-width: 100%; width: auto; height: auto; margin: auto; text-align: center; } // Add pseudo element for vertical alignment of inline (img) &:before { content: ""; height: 100%; display: inline-block; vertical-align: middle; } }