Textpattern CMS

#1 2007-05-17 00:59:00

nardo

Member

From: tuvalahiti

Registered: 2004-04-22

Posts: 743

images & dynamic column widths

got a resolution-dependent layout on the go –
column widths could be 325px or 400px depending on visitor’s browser/monitor size (etc)

how to have images fit precisely the column width?

willing to sacrifice apparent image width on the smaller columns (i.e. lose 75px off the right edge of the image with overflow:hidden) – because it’s something I can cater for when creating images –

but jus trying to get an idea of what other techniques people use…

anyone dealt with this issue??

#2 2007-05-17 02:16:11

maniqui

Member

From: Buenos Aires, Argentina

Registered: 2004-10-10

Posts: 3,070

Website

Re: images & dynamic column widths

You can try in your CSS>

#column img {
    max-width: 100%
}

That whay, when in a 325px width column, a 400px image will shrink to 325px.
Of course, IE6 doesnt support max-width, but there are some tricks (both CSS and JS) to emulate it.

Last edited by maniqui (2007-05-17 02:16:31)

---

La música ideas portará y siempre continuará

TXP Builders – finely-crafted code, design and txp

#3 2007-05-17 02:30:37

phiw13

Plugin Author

From: Japan

Registered: 2004-02-27

Posts: 3,188

Website

Re: images & dynamic column widths

overflow-x:hidden for IE 6 on the appropriate parent element.

Trying to do any max-width simulation for that browser on nested columns is mostly doomed to fail, most js or htc-behaviours are best applied to containers that are free of any other contstrains like margin-padding-border-….

---

Where is that emoji for a solar powered submarine when you need it ?
Sand space – admin theme for Textpattern

#4 2007-05-17 09:56:25

zero

Member

From: Lancashire

Registered: 2004-04-19

Posts: 1,470

Website

Re: images & dynamic column widths

You can use inline style:

<code><img src=“image.gif” width=“400px” height=“400px” alt=”“ style=“width: 100%;” /></code>

That doesn’t alter the height as well. To do that you can use ems:

<code><img src=“image.gif” width=“400px” height=“400px” alt=”“ style=“width: 25em; height: 25em;” /></code>

Edit: the last bit is probably rubbish for you! I use this method with a style sheet switcher which also changes the main font-size of the site from 1em to .75em. Code like the above can be applied to anything, not just font sizes

Last edited by zero (2007-05-17 10:33:05)

---

BB6 Band My band
Gud One My blog

#5 2007-05-17 11:48:56

nardo

Member

From: tuvalahiti

Registered: 2004-04-22

Posts: 743

Re: images & dynamic column widths

thank u

don’t know the height of images, and using the bos plugin … so using overflow:hidden as I think it’s the best compromise (based on the expected workflow)