C37Usar max-width y height de CSS para ajustar las imágenes

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:

1. Definir la propiedad max-width de las imágenes, y
2. 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

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

Pruebas