How to determine a fixed size for fancybox image gallery?

0

I'm doing an image gallery with the FancyBox plugin. I'm doing image listing with PHP, but I have a problem.

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

    
asked by anonymous 12.09.2017 / 17:03

1 answer

0

You need to create a fixed-size element around the image, and with a bit of 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><divclass='img-fit'><imgsrc="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><divclass='img-fit'><imgsrc="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSdaU9Gk1ptaWF7kr34uUSg0ETD-o57nL1Db2hW392fQa1nZIZIc_9R9-Qr" class='max-fit' />
</div>

Example in jsfiddle: link

    
12.09.2017 / 17:51