免費(fèi)AI編程助手
Pure.CSS圖片
2018-12-23 10:09 更新
Pure.CSS提供了一些圖像，以顯示使用純圖像作為主類響應(yīng)方式顯示圖像的選項(xiàng)。
| S.N. | 類名稱和描述 |
|---|---|
| 1 | pure-img 表示沒有任何邊框基本風(fēng)格的圖像。圖像隨著內(nèi)容保持正確的比例而增長和縮小 |
例
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>
結(jié)果
驗(yàn)證結(jié)果。
圖片演示
以上內(nèi)容是否對您有幫助：
更多建議：