Referentie voor Bootstrap CSS-afbeeldingen
Bootstrap-afbeeldingen
Afgeronde hoeken:
Cirkel:
Miniatuur:
<img> Lessen
De onderstaande klassen kunnen worden gebruikt om elke afbeelding op te maken:
| Class | Description | Example |
|---|---|---|
| .img-rounded | Adds rounded corners to an image (not available in IE8) | |
| .img-circle | Shapes the image to a circle (not available in IE8) | |
| .img-thumbnail | Shapes the image to a thumbnail | |
| .img-responsive | Makes an image responsive (will scale nicely to the parent element) |
Responsieve afbeeldingen
Maak responsieve afbeeldingen door een .img-responsiveklasse aan de <img>tag toe te voegen. De afbeelding wordt dan mooi geschaald naar het bovenliggende element.
De .img-responsiveklasse is van toepassing max-width: 100%, height: auto, en display:blockop de afbeelding:
Voorbeeld
<img src="cinqueterre.jpg" class="img-responsive" alt="Cinque Terre">