Pure.CSS图片

2018-12-23 10:09 更新

Pure.CSS提供了一些图像,以显示使用纯图像作为主类响应方式显示图像的选项。

S.N.类名称和描述
1  pure-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="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>

结果

验证结果。


图片演示









以上内容是否对您有帮助:
在线笔记
App下载
App下载

扫描二维码

下载编程狮App

公众号
微信公众号

编程狮公众号