diff options
1 files changed, 20 insertions, 0 deletions
| -rw-r--r-- | docs/elements.html | 20 |
diff --git a/docs/elements.html b/docs/elements.html index 88d64c8..7d42ead 100644 --- a/docs/elements.html +++ b/docs/elements.html @@ -1253,7 +1253,27 @@ </div> </div> + <section class="notes"> + <p>Add the <code>img-fit-contain</code> or <code>img-fit-cover</code> 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 background image trick. Microsoft Edge support is <a href="https://developer.microsoft.com/en-us/microsoft-edge/platform/status/objectfitandobjectposition/" target="_blank">in development</a>.</p> + </section> + <div class="columns"> + <div class="column col-6 col-xs-12"> + <figure class="figure"> + <img src="img/osx-yosemite.jpg" class="img-fit-contain rounded" alt="macOS Yosemite Wallpaper" style="background: #f8f9fa; height: 10rem; width: 100%;"/> + <figcaption class="figure-caption text-center">img-fit-contain</figcaption> + </figure> + </div> + <div class="column col-6 col-xs-12"> + <figure class="figure"> + <img src="img/osx-yosemite-2.jpg" class="img-fit-cover rounded" alt="macOS Yosemite Wallpaper" style="background: #f8f9fa; height: 10rem; width: 100%;"/> + <figcaption class="figure-caption text-center">img-fit-cover</figcaption> + </figure> + </div> + </div> + <pre class="code" data-lang="HTML"><code><<span class="tag">img</span> <span class="atn">src</span>=<span class="atv">"img/osx-el-capitan.jpg"</span> <span class="atn">class</span>=<span class="atv">"img-responsive ..."</span> <span class="atn">alt</span>=<span class="atv">"..."</span> /> +<<span class="tag">img</span> <span class="atn">src</span>=<span class="atv">"img/osx-el-capitan.jpg"</span> <span class="atn">class</span>=<span class="atv">"img-fit-contain ..."</span> <span class="atn">alt</span>=<span class="atv">"..."</span> /> +<<span class="tag">img</span> <span class="atn">src</span>=<span class="atv">"img/osx-el-capitan.jpg"</span> <span class="atn">class</span>=<span class="atv">"img-fit-cover ..."</span> <span class="atn">alt</span>=<span class="atv">"..."</span> /> </code></pre> <section class="notes"> |