Pure.CSS - Imágenes
Pure.CSS proporciona opciones para mostrar las imágenes de forma receptiva utilizando pure-image como clase principal.
| No Señor. | Nombre y descripción de la clase |
|---|---|
| 1 | pure-img Representa una imagen de estilo básico sin ningún borde. La imagen crece y se encoge con el contenido manteniendo la proporción correcta. |
Ejemplo
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
Verifica el resultado.