How to determine a fixed size for fancybox image gallery?

Asked

Viewed 195 times

0

I’m making an image gallery with the plugin Fancybox.I’m listing the images with PHP, only I have a problem.

I will be able to have images with different width and heights, so how will I always apply a fixed width and height to all images, without distorting the images, and without bursting?

php gallery fancybox

1 answer

0

You need to create a fixed size element around the image, and with a little CSS you get the result you’re looking for:

img.max-fit {
  max-width: 100%;
  max-height: 100%;
}

div.img-fit {
  float: left;
  margin: 5px;
  border: 1px solid black;
  width: 300px;
  height: 300px;
  overflow: hidden;
  background-color: #ccc;
  padding: 0;
  //  margin: 0;
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: center;
}
<div class='img-fit'>
  <img src="https://jquery.com/jquery-wp-content/themes/jquery.com/i/try-jquery.jpg" class='max-fit' />
</div>
<div class='img-fit'>
  <img src="https://jquery.com/jquery-wp-content/themes/jquery/content/books/learning-jquery-4th-ed.jpg" class='max-fit' />
</div>
<div class='img-fit'>
  <img src="https://www.google.com/logos/doodles/2017/brazil-national-day-2017-4807172314628096-2xa.gif" class='max-fit' />
</div>
<div class='img-fit'>
  <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSdaU9Gk1ptaWF7kr34uUSg0ETD-o57nL1Db2hW392fQa1nZIZIc_9R9-Qr" class='max-fit' />
</div>

Example in jsfiddle: http://jsfiddle.net/kn0yosfd/1/

Browser other questions tagged php gallery fancybox

You are not signed in. Login or sign up in order to post.