Bulma - 图像
描述
本章介绍 Bulma 对图像的支持。 Bulma 使用 .image 类在页面中显示图像。
固定方形和圆形图像
Bulma 提供 7 种尺寸来显示图像 −
is-16x16
is-24x24
is-32x32
is-48x48
is-64x64
is-96x96
is-128x128
Bulma 提供 .is-rounded 类来制作圆形图像。
以下示例描述了7 尺寸以上，显示圆形图像 −
<!DOCTYPE html>
<html>
<head>
<meta charset = "utf-8">
<meta name = "viewport" content = "width = device-width, initial-scale = 1">
<title>Bulma Elements Example</title>
<link rel = "stylesheet" href = "https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.1/css/bulma.min.css">
<link href = "https://unpkg.com/ionicons@4.3.0/dist/css/ionicons.min.css" rel = "stylesheet">
<script src = "https://use.fontawesome.com/releases/v5.1.0/js/all.js"></script>
<script src = "https://unpkg.com/ionicons@4.3.0/dist/ionicons.js"></script>
<link rel = "stylesheet" href = "https://cdn.materialdesignicons.com/2.1.19/css/materialdesignicons.min.css">
</head>
<body>
<section class = "section">
<div class = "container">
<span class = "is-size-5">
Fixed Square Images
</span>
<br>
<br>
<figure class = "image is-16x16">
<img src = "https://www.tutorialspoint.com/bootstrap/images/64.jpg">
</figure>
<span class = "is-size-6">
16x16
</span>
<br>
<br>
<figure class = "image is-24x24">
<img src = "https://www.tutorialspoint.com/bootstrap/images/64.jpg">
</figure>
<span class = "is-size-6">
24x24
</span>
<br>
<br>
<figure class = "image is-32x32">
<img src = "https://www.tutorialspoint.com/bootstrap/images/64.jpg">
</figure>
<span class = "is-size-6">
32x32
</span>
<br>
<br>
<figure class = "image is-48x48">
<img src = "https://www.tutorialspoint.com/bootstrap/images/64.jpg">
</figure>
<span class = "is-size-6">
48x48
</span>
<br>
<br>
<figure class = "image is-64x64">
<img src = "https://www.tutorialspoint.com/bootstrap/images/64.jpg">
</figure>
<span class = "is-size-6">
64x64
</span>
<br>
<br>
<figure class = "image is-96x96">
<img src = "https://www.tutorialspoint.com/bootstrap/images/64.jpg">
</figure>
<span class = "is-size-6">
96x96
</span>
<br>
<br>
<figure class = "image is-128x128">
<img src = "https://www.tutorialspoint.com/bootstrap/images/64.jpg">
</figure>
<span class = "is-size-6">
128x128
</span>
<br>
<br>
<span class = "is-size-5">
Rounded Image
</span>
<br>
<br>
<figure class = "image is-128x128">
<img class = "is-rounded" src = "https://www.tutorialspoint.com/bootstrap/images/64.jpg">
</figure>
</div>
</section>
</body>
</html>
执行上述代码，将显示以下输出 −
具有比例的响应式图像
Bulma 为图像提供了以下 16 种比例修饰符。
is-square
is-1by1
is-5by4
is-4by3
is-3by2
is-5by3
is-16by9
is-2by1
is-3by1
is-4by5
is-3by4
is-2by3
is-3by5
is-9by16
is-1by2
is-1by3
以下示例指定使用比例修饰符显示图像(此处，我们在 figure 标签中使用 is-2by1 比例修饰符) −
<!DOCTYPE html>
<html>
<head>
<meta charset = "utf-8">
<meta name = "viewport" content = "width = device-width, initial-scale = 1">
<title>Bulma Elements Example</title>
<link rel = "stylesheet" href = "https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.1/css/bulma.min.css">
<link href = "https://unpkg.com/ionicons@4.3.0/dist/css/ionicons.min.css" rel = "stylesheet">
<script src = "https://use.fontawesome.com/releases/v5.1.0/js/all.js"></script>
<script src = "https://unpkg.com/ionicons@4.3.0/dist/ionicons.js"></script>
<link rel = "stylesheet" href = "https://cdn.materialdesignicons.com/2.1.19/css/materialdesignicons.min.css">
</head>
<body>
<section class = "section">
<div class = "container">
<span class = "is-size-5">
Images with Ratio
</span>
<br>
<br>
<figure class = "image is-2by1">
<img src = "https://www.tutorialspoint.com/bootstrap/images/64.jpg">
</figure>
</div>
</section>
</body>
</html>
它显示以下输出 −
要使用剩余的比例修饰符，请在 figure 标签中将上述修饰符替换为您的比例修饰符。
bulma_elements.html
