0

Let me explain this question. I'm working on a responsive website that need the image to be scaled depending on the window's width. Do I have all set those image with this style

.bgImg{width:100%; height:auto; display:block; position:relative;}

and I have make a 3 column group like this

enter image description here

the thing is when the height of the window becomes odd, both 25% column have now a margin of 1px at the bottom

enter image description here

You'll need to zoom in the image above since it's only 1px.

I was wondering if there's a way to fix this or any javascript that could force the image height to round up to the nearest even number so all my image's height will be even and will fix that problem.

Added a fiddle http://jsfiddle.net/2QneE/3/

Warface
  • 5,029
  • 9
  • 56
  • 82
  • 1
    Have you checked this is not it? http://stackoverflow.com/questions/7774814/remove-white-space-below-image – Abhranil Das Sep 24 '12 at 18:01
  • No this is really because the middle column height is even and now both 1st and 3rd are odd that cause this problem. If the window height is even, the problem is not occurring. And my image is display:block too. – Warface Sep 24 '12 at 18:10
  • Can you recreate this on jsfiddle? – Shmiddty Sep 24 '12 at 18:12
  • I've set up something similar, and I can't recreate it: http://jsfiddle.net/2QneE/ – Shmiddty Sep 24 '12 at 18:13
  • @Shmiddty Updated your fiddle http://jsfiddle.net/2QneE/3/ Now notice the red 1px margin at the bottom when you change the window's width – Warface Sep 24 '12 at 18:29
  • Does your CSS include a set of browser reset rules? – alesub Sep 24 '12 at 23:14

0 Answers0