2

I'm having an image sizing issue with Photoswipe. Basically, this is how my photo gallery looks like now: http://img4.imageshack.us/img4/8431/problemeq.png

There are gaps in between my photos that I have inserted. I'm basically not using thumbnails, but instead passing in original photos. But I tried resizing the photos to about a thumbnail size, and yet, all it does is keep the same dimensions and reduce the quality of the photos being displayed.

And I want it to look like this without squishing the photos: http://img651.imageshack.us/img651/9199/exampleiq.png

I've styled the height to be fixed at 200px rather than 'auto,' so it really stretches the photos when changing window resolutions.

What am I missing? I don't think this is a Photoswipe problem; most likely CSS, but I don't know what to change. Any help would be greatly appreciated. Thanks!

P.S. Sorry for the links, but I can't post images yet.

Con Antonakos
  • 1,735
  • 20
  • 23

1 Answers1

1

This seems like an abandoned question, but it got me after an answer. Also, a bit tricky without seeing OP code, but assuming it's fairly untouched photoswipe, here's my answer...

The short of it is, replace the stock div.gallery-item, div.gallery-item a, and div.gallery-item img with these, and add a little img tweak.

div.gallery-item {
     float:left;
     width: 33.3333333%;
     padding-bottom: 33.3333333%;
     position: relative;
}

div.gallery-item a {
    position:absolute;
    width:100%;
    height:100%;
    background:#fff;
    text-align:center;
    border:1px solid #3c3c3c;
}
div.gallery-item img {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
}

img{
    max-height:100%;
    max-width:100%;
}

Here's a Fiddle (not with photoswipe, but the main gist of it)

Shawn Taylor
  • 15,590
  • 4
  • 32
  • 39