Bulma 任意元素的任意比率

介绍

Bulma 是一个基于 Flexbox 的现代 CSS 框架，其能够让我们更容易地构建出现代风格的网站和应用程序。在 Bulma 中，任何元素都可以使用任意的比率来改变其大小。

在本文中，我们将介绍如何在 Bulma 中使用任意比率来创建响应式元素，包括图像、视频和嵌入式内容。

图像

通过使用 Bulma 的 is-ratio 类，我们可以为图像设置一个任意的比率。这对于创建具有特定比率要求的设计非常有用。

<figure class="image is-3by1">
  <img src="https://picsum.photos/800/200" alt="Bulma" />
</figure>

在上面的示例中，我们将图像元素包装到图像容器元素中，并使用 is-3by1 类设置了一个 3:1 的比率。您可以使用 is-1by1 到 is-21by9 的其他类设置其他比率。

视频

与图像的概念非常相似，我们可以在 Bulma 中使用 is-ratio 类来设置视频的比率。这适用于嵌入式的 YouTube 或 Vimeo 视频等。

<div class="responsive-video">
  <iframe width="560" height="315" src="https://www.youtube.com/embed/dQw4w9WgXcQ" frameborder="0" allowfullscreen></iframe>
</div>

在上面的示例中，我们将 iframe 元素包装在一个 div 容器中，并使用 responsive-video 类将视频设置为 16:9 的比率。

嵌入式内容

此外，嵌入式内容，如 Google Maps 地图或其它嵌入式媒体的宽高比也可以在 Bulma 中使用 is-ratio 类指定。

<div class="embed-responsive embed-responsive-4by3">
  <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d15895.476540167651!2d-111.89102334777223!3d33.61399742067293!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x0%3A0x22d7579cefd699c3!2sGrand+Canyon+National+Park!5e0!3m2!1sen!2sus!4v1464586230703" width="600" height="450" frameborder="0" style="border:0" allowfullscreen></iframe>
</div>

在上面的示例中，我们将 iframe 元素包装在一个 div 容器中，并使用 embed-responsive-4by3 类将元素设置为 4:3 的比率。

结论

使用 Bulma，我们可以轻松地指定任何元素的比率，无论是图像、嵌入式媒体还是视频。这对于创建响应式并且美观的设计非常有用。