Purecss-images
提供:Dev Guides
Pure.CSS-画像
Pure.CSSには、pure-imageをメインクラスとして使用して、画像をレスポンシブに表示するオプションがあります。
Sr.No. | Class Name & Description |
---|---|
1 |
pure-img 境界線のない基本的なスタイル付き画像を表します。 コンテンツは正しい比率を維持しながら、画像は拡大および縮小します。 |
例
purecss_images
<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>
結果
結果を確認します。