I’m a big fan of layouts that still work if a user increases their browser’s text size. However, I was wondering what it would be like if any images resized along with the text rather than staying constant in size. Would everything seem more in proportion?
Not having seen an example of this before, I thought I’d see if I could come up with a solution. If you’re impatient, here’s the example.
I didn’t want to resize the image itself because that would cause problems with pixellation. My preferred solution was to take a large image, hide most of it at medium text size and only reveal the rest as the text size was increased.
To do this I used a large image and wrapped it in a div which was sized in ems.
As the browser’s text size increased, so did the size of the div, revealing more of the image. The challenge was to make the image look good when it was exposed in varying proportions.
Method One uses a background image. The main disadvantage of this method (other than the fact that the image is taken out of the content) is that I couldn’t find a way to keep the image in the center of the div.
So, as the div increases in size, the image no longer remains centered within it.
Here’s the HTML:
<div class="resize"></div>
And the CSS:
.resize {
background: url(image.jpg) -130px -140px no-repeat;
border: 3px double #fff;
float: left;
height: 12em;
margin: .2em 1em 1em 0;
width: 12em;
}
Method Two – my preferred solution – places the image inside the div in the HTML. This enables it to be centered within the div (thanks to Jonathan Snook for helping out with the CSS).
Here’s the HTML:
<div class="resize2"><img src="image.jpg" alt="" /></div>
And the CSS:
.resize2 {
border: 3px double #333;
float: left;
height: 12em;
margin: .2em 1em 1em 0;
overflow: hidden;
width: 12em;
}
.resize2 img {
margin: -220px 0 0 -210px;
padding: 6em 0 0 6em;
}
So there you have it. I don’t know how useful this technique is, but it was fun working it out.
Does method two assume a certain display (or actual) size for the image?
bq. I didn’t want to resize the image itself because that would cause problems with pixellation.
Or you could start with an oversized image that is shrunk back a bit for display at smaller resolutions and gets closer to 100% at larger resolutions. (You could also set a max-width on the image to prevent it becoming too stretched on really large screens.)
I had a few ideas about this that I didn’t implement.
First I wondered if there was a way to detect the increase in font-size with Javascript and swap out the image depending on how much it changed.
Secondly I thought about one image with multiple versions of the itself within it positioned in a relatively sized div, with a text-indent set to a relative value, so that as the text size increased the image shifted the right amount to show the next size up.
In the end I decided just to let the image pixellate.
*AdamD* — not really. The image only needs to be large enough to work for a couple of text resizes.
Of course, it also depends on how big you want the image to be at your site’s default font size.
*John* — yes you could, although I wonder how the shrunk image would look.
*Andrew* — not knowing much about JavaScript, I can’t comment on your first suggestion. Sounds like it could work though.
Your second idea sounds interesting, although a little complicated. I’d love to see an example in action!
Well, you could use
instead of
to achieve a centered image. I guess this method is alright if the image is rather for presentation than actual content.ciao,hofi
50% 50% or center center would work.
Wouldn’t using PHP be easier? Just use “If” and the thing you use in URL’s:
&imagesize=1
&imagesize=2
&imagesize=3
etc.
So theoretically it’d be:
if image size = 1 then make it small
if image size = 2 then make it medium
🙂
hey man this is a very uselful tip that you shared. inever knew we can do so much we css.
thanks for sharing.
keep posting such nice tutorials
i wasn’t aware of this great will use this
Good example. The PHP solution is good too. There is another solution, more complex, with PHP GD. Don’t know exactly how it works, but you can generate the image on the server on the fly.
And if you don’t care about loosing definition, just use ems instead on pixels when declaring the image size. If the user change the browser font size, the image will change accordingly.