1

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.

Mordecai
  • 1,414
  • 1
  • 7
  • 20
Nate
  • 11
  • 1
  • Please look at [how to create a Minimal, Complete, and Verifiable example](https://stackoverflow.com/help/mcve). – Andy Hoffman Apr 27 '19 at 05:47
  • Andy, I guess I am unclear as to what was not complete, minimal or verifiable about my post. I included only the parts where the issue was occurring in one small section of the html, and I only included the part of the css that was part of the gallery. Shy of uploading my screenshots, which I did not see a place to do, I do not follow. – Nate Apr 27 '19 at 05:53
  • Please take a look at [this](https://meta.stackoverflow.com/questions/358992/ive-been-told-to-create-a-runnable-example-with-stack-snippets-how-do-i-do) – Andy Hoffman Apr 27 '19 at 05:59
  • Andy, I will work on doing a better job next time. Please be patient as I am a new poster here and am stilling learning. Thanks for the advice. – Nate Apr 27 '19 at 06:08
  • Of course—I totally understand. If I came off harsh at any point, I certainly did not intend to. – Andy Hoffman Apr 27 '19 at 06:14
  • Same for me Andy. Have a great night and thanks for helping me do things the right way. – Nate Apr 27 '19 at 06:28

1 Answers1

0

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;
}
Andu Andrici
  • 853
  • 1
  • 5
  • 12
  • Andu, I just tried your suggestion it works great!!! Thank you so much for your help. I really appreciate it. Sorry for the my question wasn't as clear as I intended. – Nate Apr 28 '19 at 03:45
  • Glad it worked out. Was a fun ride. Please mark the answer as accepted to help guide future readers. Best of luck! :) – Andu Andrici Apr 28 '19 at 10:35
  • How do I do that? Is it click the answer my question button? One last question though. I would really like to have the gallery in a format of say 3 images per row and still have them evenly displayed and display how you helped me to set up. I have tried doing a table, but that interferes with your solution. I guess I'm still way too new. – Nate Apr 29 '19 at 04:09