Bootstrap (Parte 6): Imágenes

Redes sociales

Logo Bootstrap

En este artículo vamos a describir las distintas clases CSS que define Bootstrap para que puedas decorar las imágenes de tus sitios web. También te enseñaremos cómo realizar galerías de imágenes y cómo hacer responsivos objetos empotrados, como por ejemplo, vídeos.

Imágenes con esquinas redondeadas

Para redondear las esquinas del borde de una imagen puedes utilizar la clase .img-rounded. Sin embargo, ten en cuenta, que las imágenes con esquinas redondeadas no están soportadas en IE8.

Ejemplo:

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap: imágenes</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
</head>
<body>
  <img src="zaragoza_1647.jpg" class="img-rounded" alt="Zaragoza en 1647" width="300" height="168">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
  <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
</body>
</html>

Vista en el navegador:

Bootstrap - Imagenes esquinas redondeadas

 Imágenes circulares

Para redondear una imagen puedes utilizar la clase .img-circle de Bootstrap. Sin embargo, ten encuenta, que las imágenes con esquinas redondeadas no están soportadas en IE8.

Ejemplo:

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap: imágenes</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
</head>
<body>
  <img src="zaragoza_1647.jpg" class="img-circle" alt="Zaragoza en 1647" width="300" height="168">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
  <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
</body>
</html>

Vista en el navegador:

Bootstrap - Imágenes circulares

Miniaturas

Puedes utilizar la clase .img-tumbnail para crear un efecto miniatura.

Ejemplo:

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap: imágenes</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
</head>
<body>
  <img src="zaragoza_1647.jpg" class="img-thumbnail" alt="Zaragoza en 1647" width="300" height="168">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
  <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
</body>
</html>

Vista en el navegador:

Bootstrap - Imagen miniatura

Imágenes responsivas o adaptables

Las imágenes resposivas o adaptables, son aquellas imágenes, que ajustan su tamaño al tamaño de la pantalla del dispositivo con que se visualizan.

Para crear imágenes resposivas debes de utilizar la clase .img-responsive. Esta clase asigna una anchura máxima del 100% (max-width:100%) y altura automática (height: auto) a la imagen.

Ejemplo:

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap: imágenes</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
</head>
<body>
  <img src="zaragoza_1647_HR.jpg" class="img-responsive" alt="Zaragoza en 1647">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
  <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
</body>
</html>

Si ejecutas este código en tu navegador y vas reduciendo el ancho de la ventana del mismo, observarás como la anchura de la imagen se adapta a la anchura de la ventana del navegador.

Galería de imágenes

Puedes combinar el sistema de rejilla o columnas de Bootstrap con la clase .thumbnail para crear galerías de imágenes.

Ejemplo:

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap: Galeria de imágenes</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
</head>
<body>
  <div class="container">
    <h2>Galería de imágenes</h2>
    <p>La clase .thumbnail puede ser utilizada para crear galerías de imágenes. Haz clic en las imágenes para verlas a tamaño completo.</p>
    <div class="row">
      <div class="col-md-4">
        <a href="zaragoza_1647.jpg" class="thumbnail">
        <p>Zaragoza en 1647 por J. B. Martínez del Mazo</p>
        <img src="zaragoza_1647_HR.jpg" alt="Zaragoza en 1647" style="width:150px;height:150px">
        </a>
      </div>
      <div class="col-md-4">
        <a href="zaragoza_001.png" class="thumbnail">
        <p>El Pilar, el río Ebro y el Puente de Piedra</p>
        <img src="zaragoza_001.png" alt="El Pilar, el río Ebro y el Puente de Piedra" style="width:150px;height:150px">
        </a>
      </div>
      <div class="col-md-4">
        <a href="zaragoza_002.jpg" class="thumbnail">
        <p>El puente del Tercer Milenio</p>
        <img src="zaragoza_002.jpg" alt="El puente del Tercer Milenio" style="width:150px;height:150px">
        </a>
      </div>
    </div>
  </div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
</body>
</html>

Al hacer clic en cada una de las imágenes de la galería, se mostrará la imagen, a tamaño completo.

Hacer responsivos elementos empotrados

Puedes hacer también responsivos directamente los elementos <iframe>, <embed>, <video> y <object>.

Por ejemplo para crar un vídeo responsivo o adaptable tienes que utilizar la clase .embed-responsive-item en el interior de un <iframe>. El contenedor <div> define el ratio del vídeo:

<div class="embed-responsive embed-responsive-4by3">
  <iframe class="embed-responsive-item" src="..."></iframe>
</div>

El ratio de una imagen describe la proporción entre la anchura y la altura de la misma. Hay dos ratios aplicables al aspecto de un vídeo que son: 4:3(formato de vídeo estándar durante el siglo XX) y 16:9 (El formato de vídeo para la televisión HD y la televisión digital Europea). Puedes elegir entre ambos ratios utilizando las clases: .embed-responsive embed-responsive-16by9 y .embed-responsive embed-responsive-4by3.

Ejemplo:

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Vídeo responsivo</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
</head>
<body>
<div class="container">
  <h2>Vídeo responsivo</h2>
  <div class="embed-responsive embed-responsive-16by9">
    <iframe class="embed-responsive-item" src="http://www.youtube.com/embed/N4Qa0pPA9Xg"></iframe>
  </div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>

</body>
</html>

Archivos utilizados en los ejemplos de este artículo

 zaragoza_1647  zaragoza_1647_HR  zaragoza_001  zaragoza_002
zaragoza_1647. jpg zaragoza_1647_HR.jpg  zaragoza_001.png  zaragoza_002.png
Zaragoza en 1647
por J. B. Martínez del Mazo
 Zaragoza en 1647
por J. B. Martínez del Mazo
El Pilar, el río Ebro y
el Puente de Piedra
 El puente del Tercer Milenio
Redes sociales

2 Comentarios

  1. AvatarMariajo

    No encuentro esta imagen:
    zaragoza_1647_HR.jpg

    Responder
    1. Jorge LamarqueJorge Lamarque (Autor del artículo)

      Gracias por el aviso. He añadido la imagen zaragoza_1647_HR.jpg a la lista de archivos.

      Responder

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *