diff options
| Commit | 81ee834ec6914f8b284e0724d541ed927513e6bd (patch) | |
|---|---|---|
| Author | 2018-11-20 11:54:48 +0800 | |
| Committer | 2018-11-20 11:54:48 +0800 | |
| Files | ac0c29f2a5fa344bb7a05638602dd6dc60ce9e37 /docs/src/elements/media.pug | |
| Spectre-Dark-Gruvbox-0.5.6.tar Spectre-Dark-Gruvbox-0.5.6.tar.gz Spectre-Dark-Gruvbox-0.5.6.zip | ||
| Parent | ca1bdc5d86edb4d1baf3e9d1fabc89977950a2b4 (diff) | |
| Parent | ba4c380af32bc75dad1e03c2386b5f8a3fb9118f (diff) | |
Merge pull request #534 from picturepan2/0.5.6 v0.5.6
0.5.6
1 files changed, 14 insertions, 2 deletions
| -rw-r--r-- | docs/src/elements/media.pug | 16 |
diff --git a/docs/src/elements/media.pug b/docs/src/elements/media.pug index 05cd719..3cd4c2c 100644 --- a/docs/src/elements/media.pug +++ b/docs/src/elements/media.pug @@ -17,10 +17,15 @@ block docs-content p | Add the #[code img-responsive] class to #{'<img>'} elements. The images will scale with the parent sizes. - .columns + .docs-demo.columns .column.col-12 img.img-responsive.rounded(src="../img/osx-el-capitan.jpg" alt="macOS El Capitan Wallpaper") + pre.code(data-lang='HTML') + code + :highlight(lang="html") + <img src="img/osx-el-capitan.jpg" class="img-responsive ..." alt="..."> + p | Add the #[code img-fit-contain] or #[code img-fit-cover] class to #{'<img>'} or #{'<video>'} elements. The media will crop itself to fit inside the element (and you don't need another container). | This feature can replace the classic background image trick. Microsoft Edge support @@ -40,7 +45,6 @@ block docs-content pre.code(data-lang='HTML') code :highlight(lang="html") - <img src="img/osx-el-capitan.jpg" class="img-responsive ..." alt="..."> <img src="img/osx-el-capitan.jpg" class="img-fit-contain ..." alt="..."> <img src="img/osx-el-capitan.jpg" class="img-fit-cover ..." alt="..."> @@ -59,6 +63,14 @@ block docs-content img.img-responsive.rounded(src="../img/osx-yosemite-2.jpg" alt="macOS Yosemite Wallpaper") figcaption.figure-caption.text-center macOS Yosemite wallpaper + pre.code(data-lang='HTML') + code + :highlight(lang="html") + <figure class="figure"> + <img class="img-responsive ..." src="img/osx-yosemite-2.jpg" alt="macOS Yosemite Wallpaper"> + <figcaption class="figure-caption text-center">macOS Yosemite wallpaper</figcaption> + </figure> + +docs-subheading('media-video', 'Video') p |