Pure.CSS - Imagens

Pure.CSS fornece opções para exibir as imagens de forma responsiva usando pure-image como a classe principal.

Sr. Não. Nome e descrição da classe
1

pure-img

Representa uma imagem com estilo básico sem nenhuma borda. A imagem aumenta e diminui com o conteúdo mantendo a proporção correta.

Exemplo

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>

Resultado

Verifique o resultado.