How To Remove The White Space In The Photo Viewer For Different Size Photos

[Bizz ( John )]

Here is one of my classic tips for removing the white space around different size photos when viewing them in the photo viewer. Normally when you have different size photos the smaller ones tend to have a lot of white space around them, this CSS code will adjust the viewer depending on the size of the photo.

I have added a few different size photos here  http://bizzssite.ning.com/photos so you can see it working. Just add the css to your custom css section. Oh it will work on all devices too.

Here is the code for you

/* Adjust the viewer to adjust to photo size eliminating white space **/

.photoDetailPage-image > img {
    position: relative; display: flex; max-height: 100vh; height:auto; margin: 0px auto ;}
.photoDetailPage-image { position: relative;}
.photoDetailPage .image-aspect-4-3 {
    width: 100%;
    height: auto;
max-height:100vh;
padding-bottom:0px; }

[Kos]

Very nice John.  Thank you!  With any luck, Ning could incorporate this into their 3.0 improvements.

[Bizz ( John )]

Thanks Kos :-)

[Kyryl_Ning_Support]

Hi John. I should admit that it's really nice tip :). I'll definitely inform our engineers that the photos looks much better on the page in such case.
Thank you,
Ning Team.

[Kos]

Yahoo! 

[Bizz ( John )]

Thanks Kyrl, that's great news about passing this on to the team. :-)