Pure.CSS提供选项以使用纯图像作为主要类以响应方式显示图像。
| 序号 | 类名和描述 |
|---|---|
| 1个 | 纯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 = "/wp-content/uploads/2021/04/pure-480x300.jpg" alt = "html5">
</div>
<div class = "pure-u-1-4 pure-u-lg-1-8">
<img class = "pure-img" src = "/wp-content/uploads/2021/04/pure-480x300.jpg" alt = "html5">
</div>
<div class = "pure-u-1-4 pure-u-lg-1-8">
<img class = "pure-img" src = "/wp-content/uploads/2021/04/pure-480x300.jpg" alt="html5">
</div>
<div class = "pure-u-1-4 pure-u-lg-1-8">
<img class = "pure-img" src = "/wp-content/uploads/2021/04/pure-480x300.jpg" alt = "html5">
</div>
<div class = "pure-u-1-4 pure-u-lg-1-8">
<img class = "pure-img" src = "/wp-content/uploads/2021/04/pure-480x300.jpg" alt = "html5">
</div>
<div class = "pure-u-1-4 pure-u-lg-1-8">
<img class = "pure-img" src = "/wp-content/uploads/2021/04/pure-480x300.jpg" alt = "html5">
</div>
<div class = "pure-u-1-4 pure-u-lg-1-8">
<img class = "pure-img" src = "/wp-content/uploads/2021/04/pure-480x300.jpg" alt="html5">
</div>
<div class = "pure-u-1-4 pure-u-lg-1-8">
<img class = "pure-img" src = "/wp-content/uploads/2021/04/pure-480x300.jpg" alt = "html5">
</div>
</div>
</body>
</html>作者：terry，如若转载，请注明出处：https://www.web176.com/purecss/2250.html
支付宝 
微信 