Cambiar el tamaño de una imagen manteniendo la relación de aspecto usando CSS

  2. HowTo
  3. CSS Howtos
  4. Cambiar el tamaño de una imagen …
Naila Saad Siddiqui 15 febrero 2024
CSS CSS Image
  1. Aplicar estilo a las páginas web usando CSS
  2. Establecer la relación de aspecto de la imagen usando CSS
  3. Cambiar el tamaño de una imagen manteniendo la misma relación de aspecto usando CSS
Cambiar el tamaño de una imagen manteniendo la relación de aspecto usando CSS

Esta guía trivial trata sobre cómo configurar una imagen en su sitio web de modo que su relación de aspecto no se altere de acuerdo con el tamaño de la imagen y el contenedor necesario para que quepa. Primero, veremos el estilo CSS para entender esto.

Aplicar estilo a las páginas web usando CSS

CSS significa hoja de estilo en cascada. Cascada significa que hasta que ya menos que especifique diferentes estilos para los elementos secundarios, los estilos aplicados a cualquier elemento principal serán heredados automáticamente por cualquier elemento secundario.

Hay varias formas de incorporar CSS en su sitio web:

  1. CSS en línea: el uso del atributo estilo con cualquier elemento HTML y la aplicación de cualquier propiedad de estilo específicamente a ese elemento se conoce como CSS en línea.
  2. Hoja de estilo interna: si desea aplicar estilo a solo una página de su sitio web, use CSS interno. Por lo tanto, incluya las propiedades de estilo en esa página encerradas en la etiqueta <style> dentro de la parte <head> de la página HTML.
  3. Hoja de estilo externa: todas las páginas del sitio web pueden tener estilos aplicados usando CSS externo. Como resultado, crea una hoja de estilo que contiene varios tipos de selector y propiedades de estilo y la incluye en todas las páginas web de su sitio web.

Existen numerosas propiedades asociadas con las imágenes en CSS. Estas propiedades ajustan los tamaños de imagen, colores, posición, etc., en su sitio web.

Cuando ponemos imágenes en nuestro sitio web en algún contenedor como cualquier elemento div, su tamaño depende del tamaño de la imagen. Esto a veces crea problemas, ya que algunas imágenes son más grandes y otras más pequeñas; para configurar tales imágenes, configuramos su relación de aspecto.

Establecer la relación de aspecto de la imagen usando CSS

La proporción entre el ancho y la altura de un elemento se conoce como su relación de aspecto. El formato de video universal es 4:3, y dos relaciones de aspecto de video comunes son 16:9 y 3:2 (universal para televisión HD y televisión digital y predeterminado para videos de YouTube).

La sintaxis para establecer la relación de aspecto es la siguiente:

aspect-ratio: auto || <ratio>;

Establézcalo en su valor predeterminado, es decir, automático, o proporcione alguna relación de ancho:alto. Los siguientes son los valores posibles con su significado:

Relación de aspecto Descripción
relación de aspecto: automático; Este es el valor predeterminado.
relación de aspecto: 1 / 1; El ancho y la altura tienen la misma proporción.
relación de aspecto: 2 / 1; El ancho de la imagen es el doble de su altura.
relación de aspecto: 1 / 2; El ancho de la imagen es la mitad de su altura.
relación de aspecto: 16 / 9; Esta es la proporción comúnmente utilizada para videos.
relación de aspecto: 0,5; La relación también se puede especificar mediante el valor flotante.
relación de aspecto: heredar; Hereda la relación de aspecto de su elemento principal.
relación de aspecto: inicial; Esto es igual al valor predeterminado, auto.
relación de aspecto: no establecida; Elimina todas las relaciones de aspecto del elemento.

Considere un ejemplo en el que colocaremos una imagen y estableceremos su relación de aspecto:

<html>
<head>
   <style>
       .images{
            aspect-ratio: auto;
            width: 400px;
        }
    </style>
</head>
<body>
    <h2>Aspect Ratio auto </h2>
    <img src="/img/DelftStack/logo.png" class = "images"/>

</body>
</html>

En este segmento de código, hemos colocado una imagen y le hemos asignado un selector de clase, imágenes. Esta clase es una clase CSS en la que hemos establecido la relación de aspecto en auto y hemos especificado su ancho en 400 px.

Para el valor auto, la altura se ajustará automáticamente según el tamaño de la imagen.

Ahora, cambiaremos la relación de aspecto así:

.images{
    aspect-ratio: 2 / 1;
    width: 400px;
}

<h2>Aspect Ratio auto </h2>
<img src="/img/DelftStack/logo.png" class = "images"/>

La salida será así:

En esta pantalla de salida, puede ver que la altura de la imagen es la mitad de su ancho. Ahora usaremos la relación 1 / 2 para que la altura sea el doble de la anchura.

.images{
    aspect-ratio: 1 / 2;
    width: 400px;
}

<h2>Aspect Ratio auto </h2>
<img src="/img/DelftStack/logo.png" class = "images"/>

Cambiar el tamaño de una imagen manteniendo la misma relación de aspecto usando CSS

Podemos cambiar el tamaño de una imagen manteniendo la misma relación de aspecto usando CSS. Por ejemplo, considere la siguiente imagen de tamaño 428x428px:

Imagen con tamaño real

Podemos cambiar el tamaño de la imagen de arriba usando CSS manteniendo su relación de aspecto. Considere el siguiente ejemplo:

.images {
            display: block;
            max-width:250px;
            max-height:90px;
}

<h2>Aspect Ratio auto </h2>
<img src="/img/DelftStack/logo.png" class = "images"/>

Usamos el selector de clase CSS imágenes en este segmento de código. Esta clase cambia el tamaño de la imagen con un tamaño de 250x90px sin cambiar su relación de aspecto.

Mediante este método, podemos establecer la relación de aspecto de acuerdo con las necesidades y requisitos de nuestra página web.

También podemos cambiar la imagen con la misma relación de aspecto. Esto se hace principalmente para que el sitio web responda a todos los tamaños de pantalla.

Artículo relacionado - CSS Image