Bulma es un marco CSS gratuito y de código abierto que se envía con componentes y elementos prefabricados. Hace que el desarrollo de sitios web sea muy rápido, ya que no tiene que diseñar todo desde cero. En este artículo, usaremos la clase is-rounded de Bulma para hacer una imagen redonda.
Clase de imágenes redondeadas de Bulma:
- is-rounded: Esta clase se utiliza para redondear las imágenes.
Sintaxis:
<figure class="image is-64x64">
<img class="is-rounded" src="./link-to-image">
</figure>
El siguiente ejemplo ilustra las imágenes redondeadas de Bulma:
Ejemplo: El siguiente ejemplo ilustra el uso de la clase is-rounded de Bulma para hacer que una imagen sea redonda.
HTML
<!DOCTYPE html>
<html>
<head>
<title>Bulma Rounded Images</title>
<link rel='stylesheet' href=
'https://cdn.jsdelivr.net/npm/bulma@0.9.3/css/bulma.min.css'>
<style>
figure {
margin: 20px auto;
}
</style>
</head>
<body class="has-text-centered">
<h1 class="is-size-2 has-text-success">
GeeksforGeeks
</h1>
<b>Bulma Rounded Images</b>
<div class="container">
<figure class="image is-64x64">
<img class="is-rounded"
src=
"https://media.geeksforgeeks.org/wp-content/uploads/20220115184050/gfglogo-300x300.png"
alt="Gfg logo">
</figure>
</div>
</body>
</html>
Producción:
Imágenes de Bulma redondeadas
Referencia: https://bulma.io/documentation/elements/image/#rounded-images