metro4

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"> <meta name="twitter:site" content="@metroui"> <meta name="twitter:creator" content="@pimenov_sergey"> <meta name="twitter:card" content="summary"> <meta name="twitter:title" content="Metro 4 Components Library"> <meta name="twitter:description" content="Metro 4 is an open source toolkit for developing with HTML, CSS, and JS. Quickly prototype your ideas or build your entire app with responsive grid system, extensive prebuilt components, and powerful plugins built on jQuery."> <meta name="twitter:image" content="https://metroui.org.ua/images/m4-logo-social.png"> <meta property="og:url" content="https://metroui.org.ua/v4/index.html"> <meta property="og:title" content="Metro 4 Components Library"> <meta property="og:description" content="Metro 4 is an open source toolkit for developing with HTML, CSS, and JS. Quickly prototype your ideas or build your entire app with responsive grid system, extensive prebuilt components, and powerful plugins built on jQuery."> <meta property="og:type" content="website"> <meta property="og:image" content="https://metroui.org.ua/images/m4-logo-social.png"> <meta property="og:image:secure_url" content="https://metroui.org.ua/images/m4-logo-social.png"> <meta property="og:image:type" content="image/png"> <meta property="og:image:width" content="968"> <meta property="og:image:height" content="504"> <meta name="author" content="Sergey Pimenov"> <meta name="description" content="Metro 4 contains special classes for displaying images. All lightweight images styles apply to images through classes and special wrappers."> <meta name="keywords" content="HTML, CSS, JS, Metro, CSS3, Javascript, HTML5, UI, Library, Web, Development, Framework"> <link rel="shortcut icon" href="favicon.ico" type="image/x-icon"> <link rel="icon" href="favicon.ico" type="image/x-icon"> <link href="metro/css/metro-all.css?ver=@@b-version" rel="stylesheet"> <link href="highlight/styles/github.css" rel="stylesheet"> <link href="docsearch/docsearch.min.css" rel="stylesheet"> <link href="css/site.css" rel="stylesheet"> <title>Images - Metro 4 :: Popular HTML, CSS and JS library</title> </head> <body class="m4-cloak" data-role="htmlcontainer" data-html-source="header.html" data-insert-mode="prepend"> <div class="container-fluid"> <div class="row flex-xl-nowrap"> <div class="cell-md-3 cell-xl-2 pr-0 border-right bd-light" id="sidenav" data-role="htmlcontainer" data-html-source="sidenav.html" data-insert-mode="replace" data-on-load="initDocSearchEngine()"></div> <div class="d-none d-block-xl cell-xl-2 order-2 border-left bd-light toc-wrapper"> <h5>Table of contents</h5> <hr/> <ul class="toc-nav"> <li class="toc-entry"><a href="#">Images</a></li> <li class="toc-entry"><a href="#_image_container">Image container</a></li> <li class="toc-entry"><a href="#_image_helpers">Helpers</a></li> <li class="toc-entry"><a href="#_image_overlay">Overlay</a></li> </ul> </div> <main class="cell-md-9 cell-xl-8 order-1 pr-1-sx pl-1-sx pr-5-md pl-5-md"> <div class="place-right d-none d-block-lg" style="width: 200px;"> <img src="images/logo.png" class="w-100"> </div> <h1>Images</h1> <p class="text-leader"> Metro 4 contains special classes for displaying images. All lightweight images styles apply to images through classes and special wrappers. </p>  <h3 id="_image_container">Image container</h3> <p> All styles to image apply if image places in the block with class <code>.img-container</code>. This container is fluid and are made responsive with <code>max-width: 100%</code> and <code>height: auto</code> are applied to the image so that it scales with the parent element. </p> <div class="example"> <div class="img-container"> <img data-src="holder.js/100px250"> </div> </div> <pre class=""><code> <div class="img-container"> <img src="..."> </div> </code></pre> <h3 id="_image_helpers">Image container helpers</h3> <p> With image container you can use special subclasses to extend visual style for images. </p> <div class="example"> <div class="row mb-2"> <div class="cell-md-3"> <span class="text-bold text-small">.rounded</span> <div class="img-container rounded"> <img data-src="holder.js/100px100"> </div> </div> <div class="cell-md-3"> <span class="text-bold text-small">.drop-shadow</span> <div class="img-container drop-shadow"> <img data-src="holder.js/100px100"> </div> </div> <div class="cell-md-3"> <span class="text-bold text-small">.thumbnail</span> <div class="img-container thumbnail"> <img data-src="holder.js/100px100"> </div> </div> <div class="cell-md-3"> <span class="text-bold text-small">.thumbnail & title</span> <div class="img-container thumbnail"> <img data-src="holder.js/100px100"> <span class="title"> Pol. To some, a power is a heaven for meetting. </span> </div> </div> </div> <div class="row"> <div class="cell-md-3"> <span class="text-bold text-small">.selected</span> <div class="img-container selected"> <img data-src="holder.js/100px100"> </div> </div> <div class="cell-md-3"> <span class="text-bold text-small">.selected</span> <div class="img-container rounded selected"> <img data-src="holder.js/100px100"> </div> </div> <div class="cell-md-3"> <span class="text-bold text-small">.selected</span> <div class="img-container thumbnail selected"> <img data-src="holder.js/100px100"> </div> </div> <div class="cell-md-3"> <span class="text-bold text-small">.selected</span> <div class="img-container thumbnail selected"> <img data-src="holder.js/100px100"> <span class="title"> Pol. To some, a power is a heaven for meetting. </span> </div> </div> </div> </div> <pre class=""><code> <div class="img-container"> <img data-src="holder.js/100px100"> </div> <div class="img-container rounded"> <img data-src="holder.js/100px100"> </div> <div class="img-container drop-shadow"> <img data-src="holder.js/100px100"> </div> <div class="img-container thumbnail"> <img data-src="holder.js/100px100"> </div> <div class="img-container thumbnail"> <img data-src="holder.js/100px100"> <span class="title"> Pol. To some, a power is a heaven for meetting. </span> </div> <div class="img-container selected"> <img data-src="holder.js/100px100"> </div> </code></pre>  <h3 id="_image_overlay">Overlay</h3> <p> With Metro 4 you can create image with overlay and this simple and easy. </p> <div class="example"> <div class="img-container"> <img data-src="holder.js/100px250"> <div class="image-overlay"> <h2 class="text-light">Image title</h2> <p> Ubi est noster nix? An unveiled form of issue is the awareness. Slice nine celeries, pork shoulder, and rosemary in a large pan over medium heat, cook for fifteen minutes and soak with some herring. </p> </div> </div> </div> <pre class=""><code> <div class="img-container"> <img data-src="holder.js/100px250"> <div class="image-overlay"> <h2 class="text-light">Image title</h2> <p> Ubi est noster nix? An unveiled form of issue is the awareness. </p> </div> </div> </code></pre> <p> You can change overlay background color with additional color classes <code>.op-*</code>. Colors are defined in <code>metro-colors.css</code>. </p> <div class="example"> <div class="row"> <div class="cell-md-3"> <div class="img-container"> <img data-src="holder.js/100px100"> <div class="image-overlay op-amber"></div> </div> </div> <div class="cell-md-3"> <div class="img-container"> <img data-src="holder.js/100px100"> <div class="image-overlay op-green"></div> </div> </div> <div class="cell-md-3"> <div class="img-container"> <img data-src="holder.js/100px100"> <div class="image-overlay op-dark"></div> </div> </div> <div class="cell-md-3"> <div class="img-container"> <img data-src="holder.js/100px100"> <div class="image-overlay op-red"></div> </div> </div> </div> </div> <pre class=""><code> <div class="img-container"> <img src="..."> <div class="image-overlay op-amber"></div> </div> </code></pre> </main> </div> </div> <script src="docsearch/docsearch.min.js"></script> <script src="js/jquery-3.3.1.min.js"></script> <script src="metro/js/metro.js?ver=@@b-version"></script> <script src="highlight/highlight.pack.js"></script> <script src="js/clipboard.min.js"></script> <script src="js/holder.min.js"></script> <script src="js/site.js"></script>    </body> </html>