diff options
author | Max Kostikov <max@kostikov.co> | 2018-09-28 15:46:14 +0200 |
---|---|---|
committer | Max Kostikov <max@kostikov.co> | 2018-09-28 15:46:14 +0200 |
commit | 4a904fa3a8af1c101ede76657249fb7eb47faf60 (patch) | |
tree | 544509813fb68579ef2b556ce879a971d183269a /vendor/twbs/bootstrap/site/docs/4.1/content/images.md | |
parent | f5f6ec3d71acb3e0488386819d5060e59331ec23 (diff) | |
parent | c13d7e29ef9676b0f0e4ae23aa52e203f4ad8895 (diff) | |
download | volse-hubzilla-4a904fa3a8af1c101ede76657249fb7eb47faf60.tar.gz volse-hubzilla-4a904fa3a8af1c101ede76657249fb7eb47faf60.tar.bz2 volse-hubzilla-4a904fa3a8af1c101ede76657249fb7eb47faf60.zip |
Merge branch 'patch-29' into 'dev'
Patch 29
See merge request Kostikov/core!3
Diffstat (limited to 'vendor/twbs/bootstrap/site/docs/4.1/content/images.md')
-rw-r--r-- | vendor/twbs/bootstrap/site/docs/4.1/content/images.md | 84 |
1 files changed, 84 insertions, 0 deletions
diff --git a/vendor/twbs/bootstrap/site/docs/4.1/content/images.md b/vendor/twbs/bootstrap/site/docs/4.1/content/images.md new file mode 100644 index 000000000..49576da9d --- /dev/null +++ b/vendor/twbs/bootstrap/site/docs/4.1/content/images.md @@ -0,0 +1,84 @@ +--- +layout: docs +title: Images +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. +group: content +toc: true +--- + +## Responsive images + +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. + +<div class="bd-example"> + <img data-src="holder.js/100px250" class="img-fluid" alt="Generic responsive image"> +</div> + +{% highlight html %} +<img src="..." class="img-fluid" alt="Responsive image"> +{% endhighlight %} + +{% capture callout %} +##### SVG images and IE 10 + +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. +{% endcapture %} +{% include callout.html content=callout type="warning" %} + +## Image thumbnails + +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. + +<div class="bd-example bd-example-images"> + <img data-src="holder.js/200x200" class="img-thumbnail" alt="A generic square placeholder image with a white border around it, making it resemble a photograph taken with an old instant camera"> +</div> + +{% highlight html %} +<img src="..." alt="..." class="img-thumbnail"> +{% endhighlight %} + +## Aligning images + +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). + +<div class="bd-example bd-example-images"> + <img data-src="holder.js/200x200" class="rounded float-left" alt="A generic square placeholder image with rounded corners"> + <img data-src="holder.js/200x200" class="rounded float-right" alt="A generic square placeholder image with rounded corners"> +</div> + +{% highlight html %} +<img src="..." class="rounded float-left" alt="..."> +<img src="..." class="rounded float-right" alt="..."> +{% endhighlight %} + +<div class="bd-example bd-example-images"> + <img data-src="holder.js/200x200" class="rounded mx-auto d-block" alt="A generic square placeholder image with rounded corners"> +</div> + +{% highlight html %} +<img src="..." class="rounded mx-auto d-block" alt="..."> +{% endhighlight %} + +<div class="bd-example bd-example-images"> + <div class="text-center"> + <img data-src="holder.js/200x200" class="rounded" alt="A generic square placeholder image with rounded corners"> + </div> +</div> + +{% highlight html %} +<div class="text-center"> + <img src="..." class="rounded" alt="..."> +</div> +{% endhighlight %} + + +## Picture + +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. + +{% highlight html %} +<picture> + <source srcset="..." type="image/svg+xml"> + <img src="..." class="img-fluid img-thumbnail" alt="..."> +</picture> +{% endhighlight %} |