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?
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?