Pure.CSS图片
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>
结果
验证结果。
图片演示
