<!DOCTYPE html>
<
html
lang
=
"en"
>
<
head
>
<
title
>
Bulma Responsive images with ratios
</
title
>
<
link
rel
=
"stylesheet"
href
=
<
script
src
=
</
script
>
</
head
>
<
body
>
<
div
class
=
"content ml-4 has-text-centered"
>
<
h1
class
=
"title has-text-success"
>
GeeksforGeeks
</
h1
>
<
h1
class
=
"subtitle"
>
Bulma Responsive images with ratios
</
h1
>
</
div
>
<
table
id
=
"images"
class
=
"table is-striped ml-4 columns"
>
<
tbody
class
=
"column"
>
<
tr
>
<
td
style
=
"width: 10rem"
>
<
figure
class
=
"image is-square"
>
<
img
src
=
</
figure
>
</
td
>
<
td
>Square</
td
>
</
tr
>
<
tr
>
<
td
style
=
"width: 10rem"
>
<
figure
class
=
"image is-1by1"
>
<
img
src
=
</
figure
>
</
td
>
<
td
>1 by 1</
td
>
</
tr
>
<
tr
>
<
td
style
=
"width: 10rem"
>
<
figure
class
=
"image is-5by4"
>
<
img
src
=
</
figure
>
</
td
>
<
td
>5 by 4</
td
>
</
tr
>
<
tr
>
<
td
style
=
"width: 10rem"
>
<
figure
class
=
"image is-4by3"
>
<
img
src
=
</
figure
>
</
td
>
<
td
>4 by 3</
td
>
</
tr
>
<
tr
>
<
td
style
=
"width: 10rem"
>
<
figure
class
=
"image is-3by2"
>
<
img
src
=
</
figure
>
</
td
>
<
td
>3 by 2</
td
>
</
tr
>
<
tr
>
<
td
style
=
"width: 10rem"
>
<
figure
class
=
"image is-5by3"
>
<
img
src
=
</
figure
>
</
td
>
<
td
>5 by 3</
td
>
</
tr
>
<
tr
>
<
td
style
=
"width: 10rem"
>
<
figure
class
=
"image is-16by9"
>
<
img
src
=
</
figure
>
</
td
>
<
td
>16 by 9</
td
>
</
tr
>
</
tbody
>
<
tbody
class
=
"column"
>
<
tr
>
<
td
style
=
"width: 10rem"
>
<
figure
class
=
"image is-2by1"
>
<
img
src
=
</
figure
>
</
td
>
<
td
>2 by 1</
td
>
</
tr
>
<
tr
>
<
td
style
=
"width: 10rem"
>
<
figure
class
=
"image is-3by1"
>
<
img
src
=
</
figure
>
</
td
>
<
td
>3 by 1</
td
>
</
tr
>
<
tr
>
<
td
style
=
"width: 10rem"
>
<
figure
class
=
"image is-4by5"
>
<
img
src
=
</
figure
>
</
td
>
<
td
>4 by 5</
td
>
</
tr
>
<
tr
>
<
td
style
=
"width: 10rem"
>
<
figure
class
=
"image is-3by4"
>
<
img
src
=
</
figure
>
</
td
>
<
td
>3 by 4</
td
>
</
tr
>
<
tr
>
<
td
style
=
"width: 10rem"
>
<
figure
class
=
"image is-2by3"
>
<
img
src
=
</
figure
>
</
td
>
<
td
>2 by 3</
td
>
</
tr
>
</
tbody
>
<
tbody
class
=
"column"
>
<
tr
>
<
td
style
=
"width: 10rem"
>
<
figure
class
=
"image is-3by5"
>
<
img
src
=
</
figure
>
</
td
>
<
td
>3 by 5</
td
>
</
tr
>
<
tr
>
<
td
style
=
"width: 10rem"
>
<
figure
class
=
"image is-9by16"
>
<
img
src
=
</
figure
>
</
td
>
<
td
>9 by 16</
td
>
</
tr
>
<
tr
>
<
td
style
=
"width: 10rem"
>
<
figure
class
=
"image is-1by2"
>
<
img
src
=
</
figure
>
</
td
>
<
td
>1 by 2</
td
>
</
tr
>
</
tbody
>
<
tbody
class
=
"column"
>
<
tr
>
<
td
style
=
"width: 10rem"
>
<
figure
class
=
"image is-1by3"
>
<
img
src
=
</
figure
>
</
td
>
<
td
>1 by 3</
td
>
</
tr
>
</
tbody
>
</
table
>
</
body
>
</
html
>