I have several dynamic lightbox galleries on my site (this is for the revamp of our current site and is not live yet). Everything works, but for some reason, and I cannot for the life of me figure out why, my portrait images are coming out very tall compared to other images in the galleries. This seems to be much worse are very narrow images. Any help with this would be much appreciated.

I have tried to hardcode the height and width, and tried to create a special class in the css. Nothing I have tried has worked. I am using the lightbox2 from Lokesh Dhakar. I contacted him about this issue and he stated it was a css thing and suggested that I post something here for help. I do have screenshots of what I would consider an acceptable portrait image and an unacceptable portrait image.

here is the basic html for the section I am describing:

<div class="gallery1">

<a href="Halloween On The Farm 10-19-08/Photo10.jpg" data-lightbox="halloween1" data-title="5th Grade Volunteers"> <img src="Halloween On The Farm 10-19-08/Photo10.jpg" alt="5th Grade Volunteers" width="185" height="155"></a>

<a href="Halloween On The Farm 10-19-08/Photo11.jpg" data-lightbox="halloween1" data-title="This 6th Grade Girl Made her Jack-In-The-Box Costume All By Herself"> <img src="Halloween On The Farm 10-19-08/Thumbnails/Thumb11.jpg" alt="This 6th Grade Girl Made her Jack-In-The-Box Costume All By Herself"></a>

<a href="Halloween On The Farm 10-19-08/Photo12.jpg" data-lightbox="halloween1" data-title="This 6th Grade Girl Made her Jack-In-The-Box Costume All By Herself"> <img src="Halloween On The Farm 10-19-08/Thumbnails/Thumb12.jpg" alt="This 6th Grade Girl Made her Jack-In-The-Box Costume All By Herself"></a>

here's the css:

.gallery1 {
    display: block;
    border-radius: 25px 25px 25px 25px;
    padding: 10px;

}

.gallery1 img {

    border-radius: 25px 25px 25px 25px;
    padding: 15px;
    width: 200px;
    transition: 1.0s;
    cursor: pointer;
}

.gallery1 img:hover
{

     transform: scale(1.1);
}

The expected results are that the images will display correctly and not much larger than anticipated. So far, my actual results have been no success.

1 Answers

0
Andu Andrici On

This should do the job (it's the same as background-size: contain only for images instead of background-images):

.gallery1 {
    object-fit: contain;
}

Edit: the question was unclear as to the desired result.
The actual case was solved by setting a height to the images themselves:

.gallery1 {
    display: block;
    width: 100%;
    border-radius: 25px 25px 25px 25px;
    padding: 10px;
}

.gallery1 img {
    border-radius: 25px 25px 25px 25px;
    padding: 15px;
    max-width: 100%;
    height: 200px; /* max-height: 200px; */
    transition: 1.0s;
    cursor: pointer;
}