Responsive Images in a table

HTML & CSS
1

I’m trying to adapt a design to work better on mobile devices, but I’ve run into a snag: images in a table. I want the horizontal cells to appear vertically - which wasn’t a problem, but the images don’t resize as they should.

Normally, this:

img{ max-width: 100%; height: auto; width: auto\\9; /* ie8 */ }

would force each image to only be as wide as it’s container, but in a table the image retains it’s original width, causing unwanted horizontal scrolling.

Not sure if I’m describing this problem well, so here’s a quick and dirty demo: http://samples.marathonweb.com/testing/table/

Thanks for having a look.

2

Have you tried setting the table to display:block also?


[B]table{display:block}[/B]
 td {
[B]display: block;[/B]
padding: 5px 0;
border: none;
}

Seems to work for Chrome but Firefox doesn’t seem to like those images in a table though.

3

If all the images are wider than 480px anyway, maybe you could just skip the max-width and set width to 100% instead? Made some quick changes to your CSS (haven’t tried to slim it down or anything…)


<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="utf-8" />
	<title></title>

	<style>

		body{ background: #ddd; margin: 0; padding: 0; }
		#container{ width: 950px; margin: 0 auto; background: #fff; padding: 200px 25px; }
		table{ border-collapse: collapse; width: 100% }
		td{ border: 1px solid #eee; padding: 10px; }

		@media screen and (max-width: 480px){

			#container{ width: auto; margin: 0; padding: 25px 0; }
			table { display: block; }
			td{ display: block; padding: 5px 0; border: none; }
			td img{ display: block; margin: 0; width: 100%; max-width: none; }

		}

		img{ max-width: 100%; height: auto; width: auto\\9; /* ie8 */ }

	</style>

</head>

<body>
<div id="container">

	<div id="page_body">

		<table>
			<tbody>
				<tr>
					<td><img src="http://samples.marathonweb.com/testing/table/images/01.jpg" alt="" /></td>
					<td><img src="http://samples.marathonweb.com/testing/table/images/02.jpg" alt="" /></td>
					<td><img src="http://samples.marathonweb.com/testing/table/images/03.jpg" alt="" /></td>
					<td><img src="http://samples.marathonweb.com/testing/table/images/04.jpg" alt="" /></td>

					<td><img src="http://samples.marathonweb.com/testing/table/images/05.jpg" alt="" /></td>
					<td><img src="http://samples.marathonweb.com/testing/table/images/06.jpg" alt="" /></td>
					<td><img src="http://samples.marathonweb.com/testing/table/images/07.jpg" alt="" /></td>
					<td><img src="http://samples.marathonweb.com/testing/table/images/08.jpg" alt="" /></td>
					<td><img src="http://samples.marathonweb.com/testing/table/images/09.jpg" alt="" /></td>
				</tr>
			</tbody>
		</table>

	</div><!-- page body -->

</div><!-- container -->

</body>
</html>
4

Firefox on my Android phone seems to be working better than the desktop version, but I’ll be unable to test an iPhone until Tuesday. Thanks for the suggestions - I’ll let you know the results as soon as I can.

5

… your building a “responsive” site, but you have massive image files like that?!?

NON-VIABLE DESIGN ELEMENTS for ANY system. You’ve got a megabyte or so of massive images that really have no business being put on a single page on a site – PERIOD.

Much less why are they even in a table in the first place?!? That’s not tabular data.

Just what are you trying to accomplish with that? (apart from showing how ugly browser-resizing of images is?)

6

Calm down. Did you miss the part about “quick and dirty demo” ?

7

He’s got a point about resizing though. Is the end site really supposed to start with ginormous images who only get shrunken down horribly by browsers (browsers kinda suck at resizing, compared to image editors)?

If it’s just an exercise in CSS, fine, though tables in general have trouble on tiny mouse-turd-sized screens. I’ve tried the Chris Coyier “responsive data tables” setup which wasn’t bad, but I only used it because I could not change to other markup on the server-side. It’s a kludge and a hack, not something I’d ever say was a really good idea to do on mobile.

I know some of these newer phones can handle a lot, but the end goal hasn’t changed (which is, try as hard as possible not to pile a bunch of work on them).

8

Sorry for the late repy - was busy with a wedding and then buried with other projects before I could get back into this.

@CletusSpuckler This helped immensely. I might have to do some fine tuning to get everything else smoothed out, but this gets me much closer. Thank you!

9

Glad it helped :slight_smile: