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.
Dejar un comentario
¿Quieres unirte a la conversación?Siéntete libre de contribuir