Índice

Las imágenes responsivas

Bootstrap permite insertar componentes para obtener imágenes responsivas, es decir, imágenes cuyo tamaño se adapta a la pantalla donde se muestran. Las imágenes escogidas deberán tener el tamaño suficientemente grande como para mostrarse correctamente en las pantallas de ordenador y adaptarse luego a pantallas de menor tamaño.

1. La estructura general

Para este ejemplo usaremos un contenedor de ancho fijo con una fila de tres columnas. En cada celda tenemos un encabezamiento <h3>.

images/23OWT-13.png

Este es el código generado:

<div class="container">  
  <div class="row">  
       <div class="col-md-4"><h3>País Vasco</h3></div>  
       <div class="col-md-4"><h3>Cantabria</h3></div>  
       <div class="col-md-4"><h3>Asturias</h3></div>  
  </div>  
</div>

2. Insertar la imagen responsiva

En este ejemplo, las imágenes tienen un ancho de 1024 píxeles.

Haga clic después de la etiqueta de cierre </h3> del primer encabezado.

En el panel Insertar, categoría Componentes de Bootstrap, en la lista desplegable Responsive Image, seleccione Default.

images/23OWT-14.png

Dreamweaver inserta el componente Bootstrap para imágenes responsivas.

images/23OWT-15.PNG

Haga clic en el menú ...