Pure.CSS提供选项以使用纯图像作为主要类以响应方式显示图像。
序号 | 类名和描述 |
---|---|
1个 | 纯img表示没有任何边框的基本样式图像。图像会随着内容保持正确的比例而增大和缩小。 |
例子
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 = "/wp-content/uploads/2021/04/pure-480x300.jpg" alt = "html5"> </div> <div class = "pure-u-1-4 pure-u-lg-1-8"> <img class = "pure-img" src = "/wp-content/uploads/2021/04/pure-480x300.jpg" alt = "html5"> </div> <div class = "pure-u-1-4 pure-u-lg-1-8"> <img class = "pure-img" src = "/wp-content/uploads/2021/04/pure-480x300.jpg" alt="html5"> </div> <div class = "pure-u-1-4 pure-u-lg-1-8"> <img class = "pure-img" src = "/wp-content/uploads/2021/04/pure-480x300.jpg" alt = "html5"> </div> <div class = "pure-u-1-4 pure-u-lg-1-8"> <img class = "pure-img" src = "/wp-content/uploads/2021/04/pure-480x300.jpg" alt = "html5"> </div> <div class = "pure-u-1-4 pure-u-lg-1-8"> <img class = "pure-img" src = "/wp-content/uploads/2021/04/pure-480x300.jpg" alt = "html5"> </div> <div class = "pure-u-1-4 pure-u-lg-1-8"> <img class = "pure-img" src = "/wp-content/uploads/2021/04/pure-480x300.jpg" alt="html5"> </div> <div class = "pure-u-1-4 pure-u-lg-1-8"> <img class = "pure-img" src = "/wp-content/uploads/2021/04/pure-480x300.jpg" alt = "html5"> </div> </div> </body> </html>
作者:terry,如若转载,请注明出处:https://www.web176.com/purecss/2250.html