, , , , , ,

Responsive Design: adaptar imágenes y vídeos html

Adaptar imágenes

Para crear diseños muy optimizados puede ser importante usar varias imágenes distintas, una con un tamaño superior y otra con uno más ligero, pero me voy a centrar en el uso de una misma imagen (que en la medida de lo posible debería de estar optimizada) y se adaptará como nosotros queramos, pudiendo hacer que se comporten de las siguientes formas las imágenes:

 

  • Ocupar el ancho de la página: puede ser útil para cabeceras o imágenes principales y lo haremos estableciendo su ancho al 100%.

 

img {
    width:100%;
}

 

  • Tener una imagen con un tamaño máximo: en este caso la imagen tendrá un tamaño que no sobrepasará, pero cuando se disminuya el tamaño del contenedor se encogerá adaptándose a la página y nos puede servir de ejemplo usarla para un blog, donde puede que usemos en alguna ocasión una imagen un poco más grande (por ejemplo una infografía) y no queremos ni hacerla más estrecha ni recortarla.

 

img {
    width:100%;
    max-width:400px;
}

 

  • Tener las imágenes con su tamaño original: y en este último caso puede que tengamos una serie de imágenes de distintos tamaños y queremos conservar sus tamaños originales pero que se adapte al ancho del contenedor o de la pantalla y como en el caso anterior nos puede servir para un blog con un diseño adaptativo o con versión móvil (ya que se varían igual en la versión de escritorio y adaptaría al ancho en la móvil).

 

img {
    max-width:100%;
}

Os voy a poner como ejemplo la galería de webs de CSS-Tricks, que en anchos grandes divide las imágenes en tres columnas y sino en una sola, pero siempre se adaptan al 100% del ancho de su contenedor.

0 comentarios

Dejar un comentario

¿Quieres unirte a la conversación?
Siéntete libre de contribuir

Deja un comentario

Tu dirección de correo electrónico no será publicada.

13 − 5 =