From 3ab3a9d09955772ec56ddadbba49954b4edd6a3e Mon Sep 17 00:00:00 2001 From: Yan Zhu Date: Tue, 6 Nov 2018 18:52:37 +0800 Subject: Update the Docs completely --- docs/elements/media.html | 282 +++++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 282 insertions(+) create mode 100644 docs/elements/media.html (limited to 'docs/elements/media.html') diff --git a/docs/elements/media.html b/docs/elements/media.html new file mode 100644 index 0000000..2495c9b --- /dev/null +++ b/docs/elements/media.html @@ -0,0 +1,282 @@ + + + + Media - Elements - Spectre.css CSS Framework + + + + + + + + + + + + + + + +
+
+
GitHubSponsor
+
+ +
+
+
+

Media

+
+
+ + + +
+
+ + +
+
+

Media includes responsive images, figures and video classes.

+

Images

+

Add the img-responsive class to <img> elements. The images will scale with the parent sizes.

+
+
macOS El Capitan Wallpaper
+
+

Add the img-fit-contain or 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 is shipped with Build Number 16299+. +

+
+
+
macOS Yosemite Wallpaper +
img-fit-contain
+
+
+
+
macOS Yosemite Wallpaper +
img-fit-cover
+
+
+
+ 
<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="...">
+
+

Figure

+

You can use the element <figure> for an image with a caption. + Add the figure class to <figure> element. + The images with the img-responsive class will be responsive. + And the included class figure-caption will provide basic style for caption. + Also, you can use text-left, text-center and text-right for caption alignment. +

+
+
+
macOS Yosemite Wallpaper +
macOS Yosemite wallpaper
+
+
+
+

Video

+

For responsive video, add a container with the video-responsive class. + Insert any YouTube, Youku or other iframe/embed video inside the container. + The ratio is 16:9 by default. + You may add video-responsive-4-3 for 4:3 ratio video container or video-responsive-1-1 for 1:1 ratio. +

+
+
+
+ +
+
+
+

For responsive <video> elements, you can add the video-responsive class directly.

+ 
<div class="video-responsive video-responsive-4-3">
+  <iframe src="..." width="..." height="..." frameborder="0" allowfullscreen></iframe>
+</div>
+
+<video class="video-responsive" src="...">...</video>
+
+
+ +
+
+ +
+
+
+ + + \ No newline at end of file -- cgit v1.3.1-23-gd82d