| commit | author | age | ||
| 83c3f6 | 1 | --- |
| SP | 2 | layout: docs |
| 3 | title: Images | |
| 4 | description: Documentation and examples for opting images into responsive behavior (so they never become larger than their parent elements) and add lightweight styles to them—all via classes. | |
| 5 | group: content | |
| 6 | toc: true | |
| 7 | --- | |
| 8 | ||
| 9 | ## Responsive images | |
| 10 | ||
| 11 | Images in Bootstrap are made responsive with `.img-fluid`. `max-width: 100%;` and `height: auto;` are applied to the image so that it scales with the parent element. | |
| 12 | ||
| 13 | <div class="bd-example"> | |
| 14 | {% include icons/placeholder.svg width="100%" height="250" class="bd-placeholder-img-lg img-fluid" text="Responsive image" %} | |
| 15 | </div> | |
| 16 | ||
| 17 | {% highlight html %} | |
| 18 | <img src="..." class="img-fluid" alt="Responsive image"> | |
| 19 | {% endhighlight %} | |
| 20 | ||
| 21 | {% capture callout %} | |
| 22 | ##### SVG images and IE 10 | |
| 23 | ||
| 24 | In Internet Explorer 10, SVG images with `.img-fluid` are disproportionately sized. To fix this, add `width: 100% \9;` where necessary. This fix improperly sizes other image formats, so Bootstrap doesn't apply it automatically. | |
| 25 | {% endcapture %} | |
| 26 | {% include callout.html content=callout type="warning" %} | |
| 27 | ||
| 28 | ## Image thumbnails | |
| 29 | ||
| 30 | In addition to our [border-radius utilities]({{ site.baseurl }}/docs/{{ site.docs_version }}/utilities/borders/), you can use `.img-thumbnail` to give an image a rounded 1px border appearance. | |
| 31 | ||
| 32 | <div class="bd-example bd-example-images"> | |
| 33 | {% include icons/placeholder.svg width="200" height="200" class="img-thumbnail" title="A generic square placeholder image with a white border around it, making it resemble a photograph taken with an old instant camera" %} | |
| 34 | </div> | |
| 35 | ||
| 36 | {% highlight html %} | |
| 37 | <img src="..." alt="..." class="img-thumbnail"> | |
| 38 | {% endhighlight %} | |
| 39 | ||
| 40 | ## Aligning images | |
| 41 | ||
| 42 | Align images with the [helper float classes]({{ site.baseurl }}/docs/{{ site.docs_version }}/utilities/float/) or [text alignment classes]({{ site.baseurl }}/docs/{{ site.docs_version }}/utilities/text/#text-alignment). `block`-level images can be centered using [the `.mx-auto` margin utility class]({{ site.baseurl }}/docs/{{ site.docs_version }}/utilities/spacing/#horizontal-centering). | |
| 43 | ||
| 44 | <div class="bd-example bd-example-images"> | |
| 45 | {% include icons/placeholder.svg width="200" height="200" class="rounded float-left" %} | |
| 46 | {% include icons/placeholder.svg width="200" height="200" class="rounded float-right" %} | |
| 47 | </div> | |
| 48 | ||
| 49 | {% highlight html %} | |
| 50 | <img src="..." class="rounded float-left" alt="..."> | |
| 51 | <img src="..." class="rounded float-right" alt="..."> | |
| 52 | {% endhighlight %} | |
| 53 | ||
| 54 | <div class="bd-example bd-example-images"> | |
| 55 | {% include icons/placeholder.svg width="200" height="200" class="rounded mx-auto d-block" %} | |
| 56 | </div> | |
| 57 | ||
| 58 | {% highlight html %} | |
| 59 | <img src="..." class="rounded mx-auto d-block" alt="..."> | |
| 60 | {% endhighlight %} | |
| 61 | ||
| 62 | <div class="bd-example bd-example-images"> | |
| 63 | <div class="text-center"> | |
| 64 | {% include icons/placeholder.svg width="200" height="200" class="rounded" %} | |
| 65 | </div> | |
| 66 | </div> | |
| 67 | ||
| 68 | {% highlight html %} | |
| 69 | <div class="text-center"> | |
| 70 | <img src="..." class="rounded" alt="..."> | |
| 71 | </div> | |
| 72 | {% endhighlight %} | |
| 73 | ||
| 74 | ||
| 75 | ## Picture | |
| 76 | ||
| 77 | If you are using the `<picture>` element to specify multiple `<source>` elements for a specific `<img>`, make sure to add the `.img-*` classes to the `<img>` and not to the `<picture>` tag. | |
| 78 | ||
| 79 | {% highlight html %} | |
| 80 | <picture> | |
| 81 | <source srcset="..." type="image/svg+xml"> | |
| 82 | <img src="..." class="img-fluid img-thumbnail" alt="..."> | |
| 83 | </picture> | |
| 84 | {% endhighlight %} | |
