Técnica CSS WCAG 2.2

C37Usar max-width y height en CSS para que las imágenes se adapten

Nombre oficial en el W3C: Usar max-width y height de CSS para ajustar las imágenes

En pocas palabras

Una imagen con ancho fijo no se encoge cuando la pantalla es estrecha o se amplía la página. Sobresale y obliga a desplazarse de lado. Con max-width: 100 % y height: auto, la imagen se reduce hasta caber y mantiene sus proporciones.

Por qué es importante

Al ampliar al 400 % o ver la web en un móvil, el espacio disponible se reduce mucho. Una foto de 900 píxeles de ancho no cabe.

Si la imagen no se adapta, aparece una barra horizontal y parte de la página queda fuera de la vista. Las personas con baja visión tienen que moverse a izquierda y derecha para leer.

Cómo se hace

Aplique max-width: 100% a las imágenes. Así nunca serán más anchas que su contenedor.
Añada height: auto para que la altura se ajuste y la imagen no se deforme.
Puede ponerlo como regla general para todas las img de la web.
Use imágenes con un tamaño original suficiente para el espacio más grande en que se mostrarán, para que no se vean borrosas.
Haga lo mismo con vídeos, mapas incrustados y gráficos SVG.

Cómo comprobarlo

Abra la página en una ventana de 1280 píxeles de ancho y amplíe al 400 %.
Compruebe que todas las imágenes caben en la pantalla y no aparece barra horizontal.
Confirme que las imágenes no se ven estiradas ni aplastadas.
En las herramientas del navegador (tecla F12), revise que las imágenes no tienen un width fijo en píxeles sin max-width.

Ejemplo

Regla general para que todas las imágenes de una web se adapten a su contenedor.

<style>
  img { max-width: 100%; height: auto; }
</style>
<article>
  <h2>Nueva biblioteca municipal</h2>
  <img src="biblioteca.jpg" width="900" height="600" alt="Fachada de la nueva biblioteca">
</article>

Ver el texto completo del W3C (traducción al español)

Esta es una traducción no oficial al español de la técnica C37 de Techniques for WCAG 2.2, del W3C. Puede contener errores. El único documento oficial y normativo es la versión original en inglés, publicada en el sitio web del W3C.

Aplicabilidad

CSS y HTML.

Descripción

El objetivo de esta técnica es poder presentar imágenes sin introducir una barra de desplazamiento horizontal a una anchura equivalente a 320 píxeles CSS, ni una barra de desplazamiento vertical a una altura equivalente a 256 píxeles CSS en el caso de contenido pensado para desplazarse horizontalmente. Para ello se utilizan técnicas con las propiedades CSS max-width y height que se adaptan al espacio disponible y conservan las proporciones originales de la imagen.

Los diseños adaptables pueden añadir o quitar columnas o bloques de la disposición, y cada parte de la disposición puede ser más ancha o más estrecha en distintos puntos. Esta técnica garantiza que las imágenes no se salgan de su área de disposición, incluso en diseños de una sola columna, donde provocarían desplazamiento.

Los principios básicos para ajustar las imágenes son:

Definir la propiedad max-width de las imágenes, y
Definir la propiedad height de las imágenes, de modo que se agranden o se reduzcan en el espacio disponible y respondan a los niveles de zoom.

Todas las imágenes requieren cierto cuidado en el diseño: hay que asegurarse de que el tamaño original se ajusta al mayor de los espacios disponibles para obtener buenos resultados visuales en una amplia gama de tamaños de ventana gráfica y niveles de zoom.

Ejemplos

Ajustar imágenes con HTML y CSS

El siguiente ejemplo sencillo utiliza HTML y CSS para crear una imagen que se ajusta. Las regiones de la disposición cambian de tamaño cuando se modifica la ventana gráfica. A continuación, las imágenes ajustan su tamaño para caber dentro de los contenedores de las regiones de la disposición.

El nivel de zoom puede aumentarse hasta el 400 % sin que haga falta desplazarse en más de una dirección. Este ejemplo concreto utiliza un tamaño en porcentaje para max-width y un tamaño automático para height de la imagen, de modo que se conserven las proporciones originales.

<style>
.img-responsive {
  max-width: 100%;
}
</style>
<div class="panel">
  <img alt="" class="img-responsive" src="...">
  ...
</div>

Ejemplo práctico: Usar imágenes ajustables para el reajuste (reflow)

Pruebas

Procedimiento

Mostrar la página web en un agente de usuario capaz de hacer zoom al 400 % y establecer las dimensiones de la ventana gráfica (en píxeles CSS) en 1280 de ancho y 1024 de alto.
Ampliar con zoom al 400 %.
Para el contenido que se lee en horizontal, comprobar que todas las imágenes caben en su espacio disponible sin desplazamiento horizontal.
Para el contenido que se lee en vertical, comprobar que todas las imágenes caben en su espacio disponible sin desplazamiento vertical.

Si el navegador no es capaz de ampliar al 400 %, puede reducir la anchura del navegador proporcionalmente. Por ejemplo, con un zoom del 300 %, la ventana gráfica debería tener 960 px de ancho.

Resultados esperados

Las comprobaciones n.º 3 y n.º 4 son verdaderas.

Cómo lo comprobamos en ADDAW

En cada auditoría de ADDAW revisamos esta técnica página a página y le entregamos los errores con capturas y la forma de corregirlos.

Solicitar una auditoría

Basado en la técnica C37 del W3C (WCAG 2.2). Explicación y ejemplos: ADDAW. Traducción no oficial del texto del W3C © W3C, licencia de documentos del W3C. ¿Ha visto un error? Escríbanos.