making image in table responsive
I’ve made a test layout for my blog, using tables:
As you can see, I want the dual-column text to wrap around the image on both sides. I tried doing this using float elements but that was a nightmare to get right, so now I’m using tables to get the same effect.
I’m using a responsive width theme, and I want the text and images to become narrower as the browser narrows. It’s working fine for the large image outside of the table, and also for the table cells with text in them, but the cell with an image in it (or the image itself) won’t change size.
Can anyone show me how to do it? I tried giving either the image or the <td> a maximum size of 100% or 33% (my thinking being, it should be either 100% of the cell or 33% of the total table), but it hasn’t worked. I don’t have the CSS upgrade.
Thanks in advance!
PS I’m a total noob at this sort of thing!
The blog I need help with is bartjeej.wordpress.com.
Nevermind, I found it. Apparently, the default table layout (table-layout:auto) ensures that the table follows the content size rather than the other way around, which isn’t a problem with text, which can simply be moved around, but it stops images from shrinking.
Adding Style=”table-layout:fixed;” to the <table > tag means the table size determines the content size, also for images. Now, my images shrink along with the rest of the table when the screen size is reduced :)
Meh. Just noticed that in IE9, the table-layout:fixed element messes up the entire layout (some columns are much wider than they should be, which forces other columns to be much smaller). Works perfectly on FF, Opera and Safari, haven’t checked Chrome yet.
I tried repairing the IE9 problems by adding style=”width:xx%;” to each <td> but that only helps on the first row (I used colspans to have some rows with 2 cells and some rows with 3 cells). I also tried min-width and max-width, but to no avail.
From what I can tell, I can’t add conditional comments since I have no access to the style sheet, and if I’m not mistaken, I can’t use IE 9 hacks inline either (please correct me if I’m wrong on this).
To make the image shrink, you need to set a relative width: instead of “width:auto;” you need “width:100%;”.
But what you’re trying to do isn’t reasonable anyway: when the post column becomes narrower, the text blocks left and right of the centered image become longer, leaving an ugly gap below the image. Your layout experiment would work in a fixed-width theme only.
Thanks for your reply :) I had entered the “width:auto” to fix a bug in IE8 where the image just wasn’t showing at all, but using an IE8 simulator, I can’t seem to replicate that bug. I have width:auto back, and it’s working on Opera and IE9, I’ll check it on a computer with IE8 soon. Thanks :)
About the narrow text columns: I know, and it’s bugging me too. I don’t think too many people will be viewing my site from mobile devices, but still, I’m trying to find some kind of solution. Don’t think it’s ever going to adapt well to scaling when using tables though…
I’m afraid there’s no solution, since (at least as far as I know) there’s no way to make text really wrap around an image (I mean around all sides of it).
On a regular website, I would use three rows with the colspan tag in rows one and three with some of the text and the image and some text in separate cells in row two. That would simulate a wrap around effect like you see in some news or magazine articles.
<td colspan=”2″>Text Part 1</td>
<td><img src=””></td><td>Text Part 2</td>
<td colspan=”2″>Text Part 3</td>
It’s been a lot of years since I’ve played with any of that though and I have no idea if that would work here.
As I already said, this is no good when the width is flexible.
Thanks notawoodpecker, I just tried it and indeed it leaves a lot less blank space than my own method (although like justpi said, it’ll never work perfectly).
I don’t really like dividing up my page into three columns though, so I don’t think I’ll be implementing it just yet.
Do you guys think this trick would also work on a responsive web site?
If so, that might be worth getting the CSS upgrade or moving to wordpress.org…
Their demo is responsive:
But a) the trick works with a fixed-size image only, b) for each different image you’ll need additional CSS with different selectors, so it’s only worth for an isolated case or with images that are all the same size.
I thought of a solution: two columns, with the image inserted twice (once in each column) and displaced via a negative margin so that the two images will show up in the same position; and because it’s impossible to do that with precision when the width and the margin are relative, I make the one of the two images invisible.
<div style="float:left;width:50%;"> <div style="padding-right:10px;"> <img class="alignright" style="width:60%;margin-right:-34%;-moz-opacity:0;opacity:0;filter:alpha(opacity=0);" src="IMAGE URL HERE" />LEFT TEXT HERE </div></div> <div style="float:right;width:50%;"> <div style="padding-left:10px;"> <img class="alignleft" style="width:60%;margin-left:-34%;" src="IMAGE URL HERE" alt="DESCRIPTION HERE" />RIGHT TEXT HERE </div></div> <br style="clear:both;" />
thank you thank you thank you! :D it works perfectly:
I’d tried having two overlapping images by using negative margins, which I could get to work on a full width browser screen, but then the images would push each other out when the browser screen became more narrow, leading to half-overlapping images. This is exactly what I wanted, thank you so much!
(I adapted your solution to an element instead of an <img> element so that I could keep using the image as hyperlink to the flickr page, and to my delight, that’s working perfectly too!)
lol I meant an < a > element, typing it without spaces styled the following text like a hyperlink
You’re welcome, and thanks for posing an interesting problem!
Note: I added the br clear:both tag to cancel the wrap-around effect of the floating divs if no content follows. When you do have additional content, better incorporate the command in the first opening tag of that content, for instance write the “a” of your test post like this:
<p style="clear: both;">a</p>
Or if the “a” wasn’t there and the next thing was the styled div that follows, add the command to the style attribute of that div:
<div style="clear: both; float: left; width: 47%; ETC ETC">
I’m noting this because of another issue with the editor: the editor thinks that no-content tags are wrong and removes them if you switch to Visual.
The topic ‘making image in table responsive’ is closed to new replies.