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?
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