que - CSS fuerza la imagen para cambiar el tamaño y mantener la relación de aspecto

imagen autoajustable html

Question

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

<img src="big_image.jpg" width="900" height="600" alt="" />

Como se puede ver, la height y el width ya están especificados. He añadido la regla CSS para las imágenes:

img {
  max-width:500px;
}

Pero para big_image.jpg , recibo width=500 y height=600 . Cómo puedo cambiar el tamaño de las imágenes, manteniendo sus relaciones de aspecto.

Answer 1

¿Qué hay de usar un pseudo elemento para la alineación vertical? Este código menor es para un carrusel, pero creo que funciona en todos los contenedores de tamaño fijo. Mantendrá la relación de aspecto e insertará @ barras de gris oscuro en la parte superior / inferior o izquierda / escritura para la dimensión más corta. Mientras tanto, la imagen está centrada horizontalmente por la alineación del texto 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;
      }
    }

Answer 2

Eliminar la propiedad "altura".

<img src="big_image.jpg" width="900" alt=""/>

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

Opcionalmente, para restringir sobredimensionamientos:

<img src="big_image.jpg" width="900" alt="" style="max-width:500px; height:auto; max-height:600px;"/>

Answer 3

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

<div class="image-full"></div>

Y añádele esta tu hoja de estilo CSS.

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

Answer 4

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

La solución de setec está bien para "Reducir para ajustar" en el modo automático. Pero, para EXPANDIR de manera óptima para ajustarse en el modo ''automático'', primero debe colocar la imagen recibida en una identificación temporal. Compruebe si puede expandirse en altura o en ancho (según la 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 Caja de visualización más grande para ahorrar tamaño y ancho de banda.

Answer 5

He luchado con este problema bastante duro y, finalmente, he llegado a esta solución simple:

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

Puede ajustar el ancho y la altura para adaptarse a sus necesidades, y la propiedad de ajuste de objeto hará el recorte por usted.

Aclamaciones.

Answer 6

La propiedad de tamaño de fondo es ie> = 9 solamente, pero si eso está bien para ti, puedes usar un div con background-image background-size: contain y establecer background-size: contain :

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

Ahora puede ajustar su tamaño de div a lo que desee y no solo la imagen mantendrá su relación de aspecto, sino que también estará centralizada tanto vertical como horizontalmente dentro del div. Simplemente no olvide establecer los tamaños en el css ya que los divs no tienen el atributo de ancho / alto en la etiqueta en sí.

Este enfoque es diferente al de la respuesta de setecs. Al usar 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 setecs le dará un cuadro que es exactamente el Tamaño de la imagen escalada (sin espacios vacíos).

Edición: De acuerdo con la documentación de tamaño de fondo de MDN , puede simular la propiedad de tamaño de fondo en IE8 usando una declaración de filtro de propiedad:

Aunque Internet Explorer 8 no admite la propiedad de tamaño de fondo, es posible emular algunas de sus funciones utilizando la función no estándar -ms-filter:

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

Answer 7

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

Este estilo funcionó como un encanto para asegurarse de que todas las imágenes usen todo el espacio disponible, mantengan la proporción y no los cortes:

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

Answer 8

No hay 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 el height para evitar "saltos" de páginas durante la carga de imágenes, o para utilizar max-width y no especificar las dimensiones de las imágenes.

Por lo general, especificar solo el width (sin height ) 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.

Véase también el error relacionado con Firefox 392261 .

Answer 9

Para forzar una imagen que se ajuste a un tamaño exacto, no es necesario 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 */
    }

<img src="http://cdn.sstatic.net/Sites//company/img/logos/so/so-logo.png" alt="Logo">

Answer 10

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

HTML:

<div class="ratio2-1">
   <img src="../image.png" alt="image">
</div>

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 cierta relación de aspecto, independientemente del tamaño de la imagen que cargan los autores.

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

Answer 11

Puedes crear un div como este:

<div class="image" style="background-image:url(''/to/your/image'')"></div>

Y usa este css para estilizarlo:

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

Answer 12

Puedes usar esto:

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

Answer 13

Solo agréguelo a su css. Se reducirá y expandirá automáticamente manteniendo la proporción original.

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

Answer 14

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

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

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

Los trucos son

1. Usando padding-top para establecer la altura de ancho.
2. position: absolute uso position: absolute para poner la imagen en el espacio de relleno.
3. Utilice max-height and max-width para asegurarse de que la imagen no pase sobre 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, así que personalmente ofrezco la mejor respuesta cuando necesito el elemento "img" en html.

css simple utilizando el fondo http://jsfiddle.net/4660s79h/2/

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

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

Answer 15

Las siguientes soluciones permitirán aumentar y reducir la escala de la imagen , dependiendo del ancho de la caja 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 padre.

Mejores Prácticas (2018):

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

.parent {
  width: 100px;
}

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

<p>This image is originally 400x400 pixels, but should get resized by the CSS:</p>
<div class="parent">
  <img width="400" height="400" src="https://placehold.it/400x400">
</div>

Solución más elegante:

Con la solución más sofisticada, podrá recortar la imagen independientemente de su tamaño y agregar un color de fondo para compensar el recorte.

.parent {
  width: 100px;
}

.container {
  display: block;
  width: 100%;
  height: auto;
  position: relative;
  overflow: hidden;
  padding: 34.37% 0 0 0; /* 34.37% = 100 / (w / h) = 100 / (640 / 220) */
}

.container img {
  display: block;
  max-width: 100%;
  max-height: 100%;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
}

<p>This image is originally 640x220, but should get resized by the CSS:</p>
<div class="parent">
  <div class="container">
    <img width="640" height="220" src="https://placehold.it/640x220">
  </div>
</div>

Para la línea que especifica el relleno, debe calcular la relación de aspecto de la imagen, por ejemplo:

640px (w) = 100%
220px (h) = ?

640/220 = 2.909
100/2.909 = 34.37%

Así, el relleno superior = 34.37%.

Answer 16

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

<p>This image is originally 400x400 pixels, but should get resized by the CSS:</p>
<img width="400" height="400" src="http://i.stack.imgur.com/aEEkn.png">

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

Answer 17

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

<p>This image is originally 400x400 pixels, but should get resized by the CSS:</p>
<img width="400" height="400" src="https://i.stack.imgur.com/aEEkn.png">

<p>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:
</p>
<img width="400" height="200" src="https://i.stack.imgur.com/aEEkn.png">