|
 |
html_code_clinic thread: Automatic browser image resizing
Message #1 by "Andrew Haslett" <scooter@p...> on Mon, 26 Nov 2001 07:31:00
|
|
got it...
use 2 layers in the table-cel, one relative and a absolute inside it.
here's the code I used...
GreetZ
Arjan.
<html>
<head>
<title>Untitled</title>
<style>
.layer1 {
position:relative;
top:0pt;
left:0pt;
}
.layer2 {
position:absolute;
top:0pt;
left:0pt;
}
</style>
</head>
<body>
<table cellspacing="0" cellpadding="0" border="0" width="100%">
<tr>
<td width="0%"><img src="images/image1.gif" width="250" height="180"
border="0"></td>
<td width="100%" valign="top"><span class="layer1"><span
class="layer2"><img src="images/image2.gif" width="100%" height="180"
border="0"></span></span></td>
</tr>
</table>
</body>
</html>
-----Original Message-----
From: Andrew Haslett [mailto:scooter@p...]
Sent: maandag 26 november 2001 10:31
To: HTML Code Clinic
Subject: [html_code_clinic] RE: Automatic browser image resizing
Hi Arjan.
Yep tried that. Also tried it in a nested table of width = "100%", but the
browser seems to want to always overide with the actual image width
(IE5.5sp2 anyway).
Cheers,
Andrew
-----Original Message-----
From: Arjan Bosboom [mailto:Arjan.Bosboom@d...]
Sent: Monday, 26 November 2001 6:45 PM
To: HTML Code Clinic
Subject: [html_code_clinic] RE: Automatic browser image resizing
try:
<img src="..." width="100%" height="100%" border="0">
-----Original Message-----
From: Andrew Haslett [mailto:scooter@p...]
Sent: maandag 26 november 2001 8:31
To: HTML Code Clinic
Subject: [html_code_clinic] Automatic browser image resizing
Hi all.
I curretly have a 'two-columned' table, of which one side is a fixed
width. In the other column, which floats depending on the browser
resolution ,I wish to place an image, however I'd like it to fill the
entire width of that column.
I know I could possibly detect the screen size / resolution through JS to
decide between two physical images, however I was wondering if there was
another way to go about this.
Consider two resolutions: 1024*768 and 800*600. The fixed column width is
300pixels. Therefore the image needs to be either 824px or 500px wide.
Now if I create the image to be 500px wide, the browser automatically
stretches the image to 724px in 1024*768 res, however it obviously stuffs
up the image quality.
If I make the actual image 724px wide, the browser doesn't shrink the
image at all, instead it stays at 724px and I then get a 'widthwise'
scrollbar since it overflows.
So I'm stuck. I guess the question I'm asking is can you get the browser
to restrict (shrink) an image's size without explicitly specifying it's
width in the <img> tag.
I only really want to satisfy these two resolutions. Any ideas, or should
I just stick with a smaller image.
Thanks in advance,
Andrew
arjan.bosboom@d...
$subst('Email.Unsub')
$subst('Email.Unsub')
arjan.bosboom@d...
$subst('Email.Unsub')
|
|
|
View Cart
