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

imagen autoajustable html

Question

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.

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

Answer 1

Creo que necesitas pegar una clase dentro de la imagen que quieres mostrar así

< 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 ambas sean la misma cantidad de esa manera que no salga de la pantalla en alto y ancho.

o puedes jugar con el ancho y la altura

Answer 2

Puede usar un div con background-image y establecer background-size: contiene:

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. 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, por ejemplo,> = 9.

Answer 3

aquí está el ejemplo uno

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>

Answer 4

Simplemente establece el width en auto :

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

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