Pure.CSS - Hình ảnh
Pure.CSS cung cấp các tùy chọn để hiển thị hình ảnh theo cách đáp ứng bằng cách sử dụng hình ảnh thuần túy làm lớp chính.
| Sr.No. | Tên & Mô tả Lớp học |
|---|---|
| 1 | pure-img Đại diện cho một hình ảnh được tạo kiểu cơ bản không có bất kỳ đường viền nào. Hình ảnh phát triển và thu nhỏ với nội dung duy trì tỷ lệ chính xác. |
Thí dụ
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>Kết quả
Xác minh kết quả.