1

I'm using the HTML/CSS below to put a couple smaller images next to one bigger image at 100% of the screen width. I want it to keep its aspect ratio, and it looks and works fine in Firefox and IE when resizing the browser. But Chrome doesn't make the heights go together as smoothly and seemingly makes one side or the other 1px off.

http://jsfiddle.net/gxb33ex5/

img {
  float: left;
}

img.large {
  width: 70%;
}

img.small {
  width: 30%;
}
<a href="#">
    <img alt="Test Large" class="large" src="http://prizem.dreamhosters.com/test/test_large.jpg">
</a>
<a href="#">
    <img alt="Test Small 1" class="small" src="http://prizem.dreamhosters.com/test/test_small_1.jpg">
</a>
<a href="#">
    <img alt="Test Small 2" class="small" src="http://prizem.dreamhosters.com/test/test_small_2.jpg">
</a>

Any suggestions on how to properly make both sides responsive per their 70/30% split, keep aspect ratios, and fix this 1px Chrome difference? Thanks!

Huang Chen
  • 1,177
  • 9
  • 24
Prizem
  • 13
  • 2
  • 1
    I think the problem is that Chrome is rounding the height to the nearest integer (or perhaps just flooring the height), causing off-by-one errors at times. Not sure what the solution would be though... EDIT: [Yep, looks like fractional pixel handling is inconsistent across browsers](http://stackoverflow.com/questions/4308989/are-the-decimal-places-in-a-css-width-respected) – Hayden Schiff Jul 27 '15 at 20:25

1 Answers1

3

You want something quite strange.. But you may use something like this: http://jsfiddle.net/gxb33ex5/1/ At least this works, as I see. Just cut off these pixels:

.wrapper {overflow:hidden;}
Anarion
  • 1,048
  • 6
  • 16
  • Yeah I think this is going to be your best bet. If only the modulo operator hadn't been removed from the CSS calc() spec, you could use it to force the height of the large image to always be an even number of pixels (which would solve your issue -- the off-by-one issue only occurs when the large image is an odd number of pixels tall). But alas, there's just no way to do that with pure CSS. – Hayden Schiff Jul 27 '15 at 20:48
  • I see, that does fix it, thanks! Yeah at first I was thinking of using JS to make it fit right, but glad there's a relatively simple CSS fix. – Prizem Jul 27 '15 at 21:41