Asigna a la imagen atributos HTML width y height precisos y luego usa CSS para que su ancho mostrado sea adaptable y su alto, automático. Las dimensiones proporcionan una relación de aspecto anticipada sin fijar la imagen a ese tamaño de visualización. MDN: Imágenes multimedia

Esta guía está dirigida a quien edita una página HTML en un Mac y quiere que una imagen cambie de tamaño junto con su contenedor, a la vez que reserva un espacio proporcional antes de que se cargue. El ejemplo usa un gráfico abstracto autónomo, así que puedes probar cómo funciona el dimensionamiento sin descargar ningún recurso.

¿Cómo pueden las dimensiones reservar espacio sin fijar el tamaño de visualización?

Una imagen tiene dimensiones propias del recurso, como 1200 por 800, y un tamaño mostrado que determina el diseño. Esos valores pueden diferir. Los atributos de dimensión de HTML proporcionan indicaciones de tamaño; la hoja de estilos puede sobrescribir el ancho y el alto mostrados. El estándar HTML también asigna a los atributos una relación de aspecto preferida con el formato auto 1200 / 800. Estándar HTML: atributos para contenido incrustado e imágenes

Para un recurso de 1200 por 800, la relación es 3:2. Una vez que el diseño establece un ancho mostrado, el navegador puede calcular un alto proporcional antes de que termine de cargarse el recurso. MDN recomienda indicar ambas dimensiones junto con CSS adaptable para reducir los cambios de diseño relacionados con las imágenes. MDN: Imágenes multimedia

La división práctica de responsabilidades es sencilla: HTML describe las dimensiones del recurso y CSS describe cómo encaja en la página. Mantén ambas descripciones coherentes. Indicar las dimensiones resulta útil incluso si la imagen nunca se mostrará en su tamaño original.

Elige si la imagen debe llenar su contenedor

Usa el siguiente fragmento de CSS cuando la imagen deba llenar el ancho disponible del contenedor. Se presupone que la imagen tiene la clase responsive-image y atributos de dimensión precisos:

.responsive-image {
  display: block;
  width: 100%;
  height: auto;
}

Si la imagen solo debe reducirse cuando sea necesario, pero conservar el ancho declarado cuando haya más espacio, usa este fragmento alternativo:

.responsive-image {
  display: block;
  max-width: 100%;
  height: auto;
}

El segundo patrón es el método documentado por MDN para mantener una imagen dentro de un contenedor más estrecho. En este diseño sencillo, width: 100% llena el contenedor, mientras que max-width: 100% establece un límite máximo. Mantén height: auto en ambos patrones para que el alto siga la relación de aspecto en vez de permanecer en el valor HTML. MDN: Imágenes multimedia

Prueba en tu Mac una página completa con una imagen adaptable

Abre TextEdit, elige File > New y luego Format > Make Plain Text. Pega el documento completo que aparece abajo. Guárdalo como shape-demo.html; si TextEdit te pregunta qué extensión usar, elige Use .html. Estos son los pasos documentados por Apple para crear un archivo HTML. Apple: Trabajar con documentos HTML en TextEdit en el Mac

El documento incluye su CSS y un SVG codificado que contiene una composición original de círculos y rectángulos. No hay archivos ni paquetes adicionales que instalar. Tanto el recurso como el elemento de imagen declaran dimensiones de 1200 por 800.

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Shape sizing demo</title>
  <style>
    body {
      margin: 0;
      padding: 24px;
      font-family: system-ui, sans-serif;
      line-height: 1.5;
      color: #24343b;
    }

    main {
      max-width: 900px;
      margin: 0 auto;
    }

    .responsive-image {
      display: block;
      width: 100%;
      height: auto;
      background: #edf2f4;
    }
  </style>
</head>
<body>
  <main>
    <h1>Shape study A</h1>
    <p>Resize the window to change the composition's displayed size.</p>
    <img
      class="responsive-image"
      width="1200"
      height="800"
      alt="A blue circle beside an amber rounded rectangle."
      src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1200' height='800' viewBox='0 0 1200 800'%3E%3Crect width='1200' height='800' fill='%23edf2f4'/%3E%3Ccircle cx='360' cy='400' r='180' fill='%234b8090'/%3E%3Crect x='660' y='220' width='300' height='360' rx='40' fill='%23d6a96b'/%3E%3C/svg%3E">
    <p>Marker B: this paragraph follows the image in normal document flow.</p>
  </main>
</body>
</html>

Abre el archivo guardado en tu navegador y estrecha la ventana. La composición debería reducirse proporcionalmente y Marker B debería permanecer debajo. Al ensanchar la ventana, la composición crecerá hasta que el contenedor del ejemplo alcance su máximo de 900 píxeles. Ese máximo es una elección ilustrativa de diseño de página; no es un requisito de la técnica de reserva.

El recurso incrustado se carga de inmediato, así que este ejemplo muestra el dimensionamiento adaptable, pero no una descarga visiblemente demorada. El SVG codificado se analizó y sus dimensiones se comprobaron con Python; también se ejecutaron los cálculos que aparecen abajo. Durante la preparación no se ejecutó la representación en un navegador.

Para adaptar la página a otro recurso, reemplaza el valor de src y actualiza ambas dimensiones HTML para que coincidan con ese recurso. Usa números enteros sin unidades, como 1200, en lugar de 1200px, en estos atributos. MDN especifica este formato para las dimensiones de las imágenes. MDN: El elemento de imagen incrustada

¿Cuánto espacio debería reservar el navegador?

Para este diseño sencillo, sin bordes ni relleno en la imagen, calcula el alto esperado así:

alto mostrado = ancho mostrado × alto del recurso ÷ ancho del recurso

Al usar las dimensiones de 1200 por 800 del ejemplo, se obtienen estos resultados ilustrativos. Los anchos se refieren al cuadro de contenido de la imagen, no a toda la ventana del navegador.

Ancho mostrado de la imagen Alto proporcional
300 píxeles CSS 200 píxeles CSS
600 píxeles CSS 400 píxeles CSS
900 píxeles CSS 600 píxeles CSS

Este cálculo también sirve para diagnosticar problemas. Supongamos que el recurso real mide 1200 por 800, pero el HTML declara incorrectamente 1200 por 600. Con un ancho mostrado de 600 píxeles, la relación declarada sugiere un alto de 300 píxeles; la relación real requiere 400 píxeles. Eso deja la posibilidad de que haya que corregir 100 píxeles cuando se conozca la relación natural.

La corrección se debe a la parte auto de la indicación de relación: una imagen con una relación de aspecto natural usa esa relación cuando está disponible. Por eso importan los atributos precisos, aunque la hoja de estilos sea correcta. La especificación CSS define esta distinción entre una relación proporcionada y la relación natural de un elemento reemplazado. Módulo de dimensionamiento de cajas CSS, nivel 4: relaciones de aspecto preferidas

¿Cuándo deberías usar aspect-ratio de CSS en su lugar?

Usa una relación explícita en CSS cuando el diseño defina deliberadamente la forma del cuadro de la imagen. Por ejemplo, un mosaico cuadrado es un requisito distinto de mostrar proporcionalmente toda la composición 3:2.

El siguiente fragmento reemplaza el CSS del ejemplo completo. Sustituye con él la regla .responsive-image existente:

.responsive-image {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1 / 1;
  object-fit: contain;
  background: #edf2f4;
}

Aquí, aspect-ratio: 1 / 1 solicita un cuadro cuadrado. El ancho sigue siendo adaptable y el alto automático se calcula a partir de ese ancho. Para que una relación de aspecto preferida influya en el dimensionamiento, al menos una dimensión debe ser automática; establecer ambas dimensiones de forma explícita elimina esa función. MDN: aspect-ratio

La declaración object-fit: contain mantiene visible toda la composición dentro del cuadrado y deja espacio sin usar donde las formas del recurso no lo llenan. Cambiar el valor a cover llena el cuadrado, pero recorta parte de la composición. Elige ese comportamiento deliberadamente: el recorte puede eliminar partes importantes de una imagen. MDN: object-fit

Para una relación temporal que deba ceder ante la relación natural del recurso, CSS también admite un valor como aspect-ratio: auto 3 / 2. Si el recurso es distinto, las proporciones del cuadro pueden cambiar después de la carga. Una relación sin auto expresa, en cambio, la forma preferida por el diseño. Módulo de dimensionamiento de cajas CSS, nivel 4: relaciones de aspecto preferidas

¿Qué debes comprobar si la imagen sigue moviéndose o se estira?

Comprueba el recurso y el diseño en este orden:

  1. Confirma ambas dimensiones HTML. Deben describir el recurso con precisión. Un ancho correcto junto con un alto incorrecto sigue proporcionando una relación errónea.
  2. Comprueba el alto aplicado por CSS. En el ejemplo proporcional, debería ser auto. Puede que otra regla coincidente esté asignando un alto fijo.
  3. Comprueba el ancho mostrado. El cálculo del espacio reservado depende del ancho establecido por el diseño. Al cambiar el tamaño del navegador, ese ancho y su alto proporcional cambian de forma intencionada.
  4. Comprueba las reglas de relación explícita. Una relación cuadrada de CSS y una relación natural de 3:2 expresan intenciones de dimensionamiento diferentes.
  5. Comprueba por separado el ajuste de la imagen. contain y cover controlan cómo encaja el recurso en su cuadro; no proporcionan las dimensiones que le faltan al cuadro.

Estas comprobaciones siguen la distinción entre el cuadro del elemento, su relación preferida y el recurso que se representa dentro de él. La guía de MDN sobre relaciones de aspecto explica cómo afectan las dimensiones explícitas al dimensionamiento proporcional, mientras que la referencia de object-fit documenta el ajuste y el recorte. MDN: Cómo entender y establecer relaciones de aspecto, MDN: object-fit

La compatibilidad con los navegadores también tiene un límite. MDN indica que la propiedad CSS aspect-ratio está ampliamente disponible en los navegadores desde septiembre de 2021. Eso no garantiza la compatibilidad con todos los navegadores antiguos, ni es una fecha de compatibilidad para todos los comportamientos de mapeo de dimensiones HTML. Si tus requisitos incluyen un navegador antiguo, consulta la información de compatibilidad de la documentación. MDN: aspect-ratio

Para el caso habitual de una imagen proporcional, empieza con dimensiones HTML precisas y CSS adaptable. Usa una relación explícita de CSS cuando la página necesite una forma de cuadro concreta. Con estas opciones puedes reservar el espacio previsto y permitir que el tamaño mostrado siga el diseño de la página.

Fuentes