¿Cómo cambio el tamaño de una imagen manteniendo la relación de aspecto en CSS?

Tengo una imagen grande. Quiero mostrarlo en su propia página web, y al hacer esto sin ningún CSS, llena toda la página y es demasiado grande para mostrarla al mismo tiempo (aparecen barras de desplazamiento). Quiero reducirlo para que se ajuste a la altura de la pantalla del usuario (no el ancho). Encontré soluciones, pero estiran la imagen para que se ajuste a toda la pantalla. No quiero esto, ya que arruina la relación de aspecto.¿Cómo cambio el tamaño de una imagen manteniendo la relación de aspecto en CSS?

Básicamente, quiero cambiar el tamaño de una imagen manteniendo la relación de aspecto. ¿Cómo hago esto?

Fuente

2012-09-07 user1447941

http://stackoverflow.com/questions/10559058/resize -view-width-preserve-image-aspect-ratio-with-css –

Simplemente especifique la altura y deje la propiedad width como está. – knittl

Este es un tema repetido con una solución ya. https://stackoverflow.com/questions/3029422/how-do-i-auto-resize-an-image-to-fit-a-div-container –

acaba de establecer la width-auto:

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

Aquí está el violín: http://jsfiddle.net/6Y5Zp/

Fuente

2012-09-07 15:09:20

¿Cómo puedo ajustar automáticamente la altura para que se ajuste a la mejor relación de aspecto posible? dependiendo del tamaño de la imagen? – user1447941

@ user1447941 - El código anterior hace exactamente eso. –

Si desea ajustar el ancho: ancho: 100% y alto: automático en su lugar – speeder

Puede utilizar un div Imagen de fondo con y poner el fondo de tamaño: contener:

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

Ahora puede establecer el tamaño de su div a lo que desee y la imagen no solo mantendrá su relación de aspecto sino que también se centralizará vertical y horizontalmente 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.

Sin embargo, la propiedad de fondo es decir> = 9 solamente.

Fuente

2013-05-30 13:59:37 Hoffmann

Creo que se necesita para pegar una clase dentro de la imagen que desea mostrar como esto

< image class="image" >

y esta es la clase

.image 


text align: center 
max width:pixels you want 
max height pixels you want

pero asegúrese de que ambos son la misma cantidad de esa manera no saldrá de la pantalla en alto y ancho.

o se puede jugar con la anchura y la altura

Fuente

2013-06-05 02:56:20 jose

aquí es la muestra de un

div{ 
 
    width: 200px; 
 
    height:200px; 
 
    border:solid 
 
} 
 

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

<div> 
 
    <img src="https://upload.wikimedia.org/wikipedia/meta/0/08/Wikipedia-logo-v2_1x.png"> 
 
</div>

Fuente

2015-02-22 11:21:22

Esta es la solución más fácil, pero tenga en cuenta que IE no es compatible con la propiedad object-fit. – cytsunny

Aparentemente ni siquiera IE 11 o Edge 15 admiten esto: http://caniuse.com/#feat=object-fit – Grav

¿Cómo cambio el tamaño de una imagen manteniendo la relación de aspecto en CSS?

Respuesta

Cuestiones relacionadas