figure element

by Imri Paloja

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.1/normalize.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/skeleton/2.0.4/skeleton.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/fancybox/3.5.7/jquery.fancybox.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/fancybox/3.5.7/jquery.fancybox.min.js"></script>
<div class="container">

  <figure>
    <a href="https://www.w3schools.com/tags/pic_trulli.jpg" data-fancybox="house" data-caption="Trulli" title="Trulli">
      <img src="https://www.w3schools.com/tags/pic_trulli.jpg" alt="Trulli">
    </a>
    <figcaption>Fig.1 - Trulli, Puglia, Italy.</figcaption>
  </figure>

  <figure>
    <a href="https://www.w3schools.com/tags/img_girl.jpg" data-fancybox="persons" data-caption="Girl in a jacket" title="Girl in a jacket">
      <img src="https://www.w3schools.com/tags/img_girl.jpg" alt="Girl In a jacket">
    </a>
    <figcaption>Fig.2 - Girl in a jacket.</figcaption>
  </figure>

</div>

CSS

figure {
  border: 1px solid #CCCCCC;
  background: #EEEEEE;
  padding: 20px 30px;
  margin: 20px 30px;
  max-width: 250px;
  min-width: 75px;
  width: auto;
  
  max-height: 250px;
  min-height: 75px;
  height: 100%;
  
}

figure img {
  width: 100%;
  height: 100%;
}

figure figcaption {
  font-size: 10px;
}