Make image responsive to parent <li>

JavaScript
1

I’m working on a photo gallery which you can see here
The problem I am having is that the portrait photographs not reduce in the same way as the landscape photographs relative to the parent when the browser window is reduced. I’ve tried it with CSS:


.gallery ul li {
   width: 33% !important;
   max-height: 125px;
   margin: 0;
  margin-top: 30px !important;
   float: left;
   text-align: center;
   list-style: none !important;
}

.gallery ul li img {
  max-width: 100%;
  height: auto;
}

All thumbnails have a same height of 125px, but due to the difference in width between the landscapes and the portraits, is this, understandably, not working. So I guess I need to use some kind of Javascript function to determine the width of each image in relation to the parent <li>. Can someone please help me because this s driving me insane :frowning:

2

Hi donboe,

It seems your question was answered here: http://www.sitepoint.com/forums/showthread.php?1183363-alternative-max-width-100-for-responsive-thumbnails
Yay!

I’`m gonna close this thread now, so that someone else doesn’t put effort into solving a problem that has already been solved.
If you need it reopened for any reason, just shoot me a PM.