In Bootstrap 3 le immagini non sono fluide e responsive di default. Ricordiamo che un'immagine è fluida e responsiva quando la sua dimensione orizzontale si adatta automaticamente a quella dell'elemento che la contiene.

Ecco cosa succede se inserisco nel box un'immagine di 900px: a un certo punto, esce dai bordi del pannello che la contiene.

Per rendere un'immagine responsiva bisogna applicarle la classe .img-responsive che imposta max-width: 100% e un'altezza automatica:

.img-responsive {
  display: inline-block;
  height: auto;
  max-width: 100%;
}

Riprendiamo l'immagine di prima e modifichiamo così il markup:

<img src="img/immagine-900.jpg" class="img-responsive">

Ecco il risultato:

Bootstrap 3 mette a disposizione tre classi per modificare la presentazione delle immagini: .img-rounded, .img-circle e .img-thumbnail.

Immagini con bordi arrotondati

La classe .img-rounded arrotonda i quattro angoli dell'immagine per un valore pari a 6px. Ecco la regola CSS su cui intervenire per personalizzare il valore:

.img-rounded {
  border-radius: 6px;
}

<img src="img/immagine-250.jpg" class="img-rounded">

Immagini circolari

Usando la classe .img-circle arrotondiamo i bordi fino a far assumere all'immagine una forma vagamente ellittica (se la larghezza è superiore all'altezza) o perfettamente circolare (se l'immagine è quadrata).

<img src="img/immagine-180.jpg" class="img-circle">

Immagini thumbnail

La classe .img-thumbnail è concepita in particolare per le immagini da usare come thumbnail (miniature). Questa la regole CSS con cui viene impostata la presentazione di questa classe:

.img-thumbnail {
  display: inline-block;
  height: auto;
  max-width: 100%;
  padding: 4px;
  line-height: 1.428571429;
  background-color: #ffffff;
  border: 1px solid #dddddd;
  border-radius: 4px;
  -webkit-transition: all 0.2s ease-in-out;
          transition: all 0.2s ease-in-out;
}

Come si vede, viene aggiunto intorno all'immagine un padding di 4px e un sottile bordo grigio. Il bordo è leggermente arrotondato.

<img src="img/immagine-180.jpg" class="img-thumbnail">