CODEWITHSUNDEEP
htmlcssresponsive-design
Marius
Marius

Reputation: 4016

fluid images in one row

I've stumbled into a tiny problem, which, for some reason, i have no idea how to solve. It might be one of those cases where it just looks simple, but impossible to implement. Here's the problem:

The trick to get the images to scale down is by adding img { max-width: 100%; } in the css file, but that wouldn't work in this case. I'd like to ask if anyone knows an easy solution for this problem? I could try to set max-width for each image to a different number depending on their widths but i'm affraid the calculations will be off in some browsers (we all know how some browsers treat percentages with decimal places).

Thanks in advance

Non-working example:

<div style="width:40%"><img src="img1.jpg" /><img src="img2.jpg" /></div>
CSS: img { max-width: 100%; }

Comments: This is perfect for a single image so i'm looking for something as simple for multiple images.

Working example:

<div style="width:40%"><img src="img1.jpg" style="width:47.88%" /><img src="img2.jpg" style="width:52.12%" /></div>

Comments: calculating percentage widths is a pain and i'm not sure if it will even work in all cases.

Upvotes: 1

Views: 3926

Answers (1)

Chad von Nau
Chad von Nau

Reputation: 4404

I think you'll be fighting an uphill battle if you try to do this all within a single div. An easy, reliable solution is to use a table. You could also do it with a bunch of divs that approximate a table.

http://jsfiddle.net/chad/uSrYx/ - tables

http://jsfiddle.net/chad/uSrYx/1/ - divs masquerading as tables

http://jsfiddle.net/chad/uSrYx/2/ - a slightly different effect with inline-block divs inside of a white-space:nowrap container. Only possible if you know how many images are on each row beforehand

It all depends on how you want this to degrade in older browsers. Using a table will keep everything on the same line, but that line's width with not scale down. Using divs will stack the images vertically.

Upvotes: 3

Related Questions