Portait images olny scaling after a certain poin

[donboe]

I have a image gallery with mixed landscape and portrait images. See the image:

The problem I have is that the portrait images only start scaling after a certain point. In the example image the screen width is 960px.and the landscape images are about 60% from their original size, but the portait images still have their original size. Only at a screen width of arround 800px the portait images start to rescale.

This is the CSS I have so far:

#gallery {
  width: 100%;
  margin: 2em 0 0;
  float: left;    
}

#gallery,
#gallery li {
  list-style: none;    
}

#gallery li {
  width: 26%;
  margin: 0 10% 3em 0;
  padding: 0 !important;
  display: inline-block;
  vertical-align: top;
  text-align: center;     
}

#gallery li:nth-child(3n+3) {
  margin: 0 0 3em;    
}

#gallery li a {
  max-width: 100%;
  display: inline-block;
  text-decoration: none;
  outline: none;    
}

#gallery li img {
  max-width: 100%;
  padding: 2px;
  border: solid 1px #999;    
}

#gallery li:hover img,
#gallery li:focus img {
  border-color: #00ABAF;    
}

Next to max-width, I tried max-height on images as well, but without any result. What is the right way to handle this?

Thank you in advance

[PaulOB]

Hi,

You probably want a width on “gallery li a” otherwise it will shrink to fit and the img will have no width to base itself on (max-width does nothing here as the element is shrink to fit and the max-width is provided via the parent anyway). You want it 100% wide which will be the width of the list. Therefore you would be better off having the a element as display:block instead of inline-block.

If your image isn’t as wide as the 26% width on the list then it won’t scale until that becomes true. As you don’t have a live link its hard to test out and see what’s best. If you have mixed size images and you aren’t setting them to width:100% then yes some images will start scaling and some won’t scale until they need to.

[donboe]

Hi Paul. thanks for the reaction. It is indeed a pitty that I don’t have a live link, but it is an allready existing site that will be moved to a different server and I was asked to make the site responsive before it is moved. You can see the old site here

As you can see did they just scale all thumbnails to the same size, which I don’t see as an option. So what do you think would be best?

Thank you in advance.

[PaulOB]

@donboe

So what do you think would be best?

That’s hard for me to answer as I don’t really know the dynamics and the min/max widths of images concerned.

Looking at your first screenshot I would probably arrange those rows with inline-block rather than floats and then just let the images wrap at smaller window sizes and when there’s no room start to scale them smaller.

You either live with the different size images or you scale them to be all the same width.

[donboe]

Hi Paul. Thanks again for the reply. Actually when adding images in the controlroom, they are cropped on height rather then on width. But that is because of the portrait images.