<a href="https://raw.githubusercontent.com/jecosjmecos/public-images/ab02427995baaced01e21d3881d5dd30b31d07f8/1.jpg" data-fancybox data-caption="Hello fancybox">
  <img src="https://raw.githubusercontent.com/jecosjmecos/public-images/ab02427995baaced01e21d3881d5dd30b31d07f8/1.jpg" />
</a>
body{
  background: dodgerblue;
}
a{
  width: 200px;
  height: 200px;
  display: block;
}

a img{
  width: 100%;
  hegith: 100%;
  object-fit: cover;
}
Fancybox.bind();

External CSS

  1. https://cdn.jsdelivr.net/npm/@fancyapps/ui@5.0/dist/fancybox/fancybox.css

External JavaScript

  1. https://cdn.jsdelivr.net/npm/@fancyapps/ui@5.0/dist/fancybox/fancybox.umd.js