Pure.CSS - 圖片

Pure.CSS 為使用 `pure-image` 作為主類的響應式圖片顯示提供了選項。

序號	類名和說明
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>

結果

驗證結果。

列印頁面