Pure.CSS provides options to display images in responsive way using pure-image as the main class.
| S.N. | Class Name & Description |
|---|---|
| 1 | pure-img Represents a basic styled image without any border. Image grows and shrinks with the content maintaining the correct ratio |
Example
purecss_images.htm<html> <head> <title>The W3.CSS Images</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://yui.yahooapis.com/pure/0.6.0/pure-min.css"> </head> <body> <h2>Images Demo</h2> <hr/> <div class="pure-g"> <div class="pure-u-1-4 pure-u-lg-1-8"> <img class="pure-img" src="html5-mini-logo.jpg" alt="html5"> </div> <div class="pure-u-1-4 pure-u-lg-1-8"> <img class="pure-img" src="html5-mini-logo.jpg" alt="html5"> </div> <div class="pure-u-1-4 pure-u-lg-1-8"> <img class="pure-img" src="html5-mini-logo.jpg" alt="html5"> </div> <div class="pure-u-1-4 pure-u-lg-1-8"> <img class="pure-img" src="html5-mini-logo.jpg" alt="html5"> </div> <div class="pure-u-1-4 pure-u-lg-1-8"> <img class="pure-img" src="html5-mini-logo.jpg" alt="html5"> </div> <div class="pure-u-1-4 pure-u-lg-1-8"> <img class="pure-img" src="html5-mini-logo.jpg" alt="html5"> </div> <div class="pure-u-1-4 pure-u-lg-1-8"> <img class="pure-img" src="html5-mini-logo.jpg" alt="html5"> </div> <div class="pure-u-1-4 pure-u-lg-1-8"> <img class="pure-img" src="html5-mini-logo.jpg" alt="html5"> </div> </div> </body> </html>
No comments:
Post a Comment