Variable Image Sizing

[PapaGeek]

This is a somewhat complex question. I created a script that selects a different CSS file based on the width of a page. The script also has a feature called Variable Image Sizing for use on fluid design websites. You can see the feature in action at: http://www.variablehtml.com/readability.htm . Change the width of the page and watch the way the image resizes itself.

Let me set up the question. My page can change the layout of the content area from single column to two column text by using 3 DIV classes: col1, col2, and twocol. The image on the referenced page is keyed in the twocol class so I can always define it as 95% of the width of the content area and a max width of 700 pixels. This is done by defining the class of the image as:

<img width=700 height=474 src=readability.gif class=vis95p700x>

When I want an image to appear in a single column, I’d want to define it as 48% of the content area width when the width of the page allows me to display two columns, and when the width is smaller and I display the columns one under the other, I’d want the image to display as 95% of the width. Since it is the class of the image, starting with the letters “vis” that triggers the resizing feature, the only way I can think of to accomplish this is to key the image twice and wrap each reference in a different span tag so I can hide one image or the other depending on the layout being used.

<span class=onecolumn><img width=350 height=225 src=myimage.gif class=vis95p350x></span>
<span class=twocolumns><img width=350 height=225 src=myimage.gif class=vis48p350x></span>

Then I could add a line like .onecolumn {display:none;} in the two column css file and the opposite in the one column css file.

Can anyone think of a better way of doig this other than using SPAN?

 

[leroy30]

Can it not be achieved with something like this...?
You can make the divs flow inline like a span does and then if it runs out of room it will simply wrap below.

<style type="text/css">

.pagecontent {width:100%;min-width:200px;max-width:700px;}
.column {width:50%;min-width:200px;display:inline-block;*display:inline;zoom:1;}

</style>
...
<div class="pagecontent">

<div class="column">
Some text here
</div>

<div class="column">
Some text here
</div>

</div>

 

[PapaGeek]

Thanks for the response Leroy,


This is the coding I currently use to achieve switching between single and two column text display based on the width of the browser window:

<div class=twocol>
Headline and maybe a short block of text
</div> 
<div class =col1>
First half of content for this section
[B][COLOR="Red"]<span class=onecolumn><img width=350 height=225 src=myimage.gif class=vis95p350x></span>
<span class=twocolumns><img width=350 height=225 src=myimage.gif class=vis48p350x></span>[/COLOR][/B]</div>
<div class=col2>
Second half of text for this section
</div>

Repeat the twocol, col1, and col2 classes as often as necessary.

The CSS file that displays the page as a single column does not mention the 3 classes.

OneColumn.css:

.twocolumns {display: none;}

The CSS file that displays the page as two column text includes the flowing entries:

TwoColumns.css

.onecolumn {display: none;}
.twocol {clear:both; width:100%;}
.col1 {float:left; width:48%;}
.col2 {float:right; width:48%;}

The Variable HTML script would then activate one css file or the other based on the width of the page.

On narrow pages the blocks merely appear under each other and the variable image sizer sees the class as “vis95p230x” and allows it to expand to 95% of the page width but no wider than230 pixels.

On wider pages the blocks would float next to each other as a two column display and the variable image sizer sees the class as “vis48p230x” and allows it to expand to 48% of the page width but no wider than230 pixels. This will restrict the image to a size that will fit in a single column on the page.

 

[PixelPusher]

Why are you using js to trigger different style sheets? If you use floats, by nature they will wrap under each other if the parent width does not allow them to position side by side. I'm confused.

At first glance it seems like you are making a mountain out of a mole hill...but maybe im missing something