Resize images in Firefox [Archive]

manyamile

05-25-2008, 05:17 AM

I want to put 4 images on a page so that their total height fits on the screen exactly no matter what the resolution is. 3 images must be above and one below with its width equal to the sum of the other 3.

I have managed to do this in Internet Explorer but it does not work in Firefox, I think Firefox isn't resizing the images at all.

Here is what I did:

<style type="text/css">
* {padding:0; margin:0;}/* Set everything to "zero" */
p {font-size: 100.1%; line-height:1.0em; margin:16px 0 12px 0;}

html, body {min-height:100%; height:100%;
font:x-small Arial, Verdana, sans-serif;
voice-family: "\"}\"";voice-family:inherit;
font-size:small;/*for IE 5.5 */}
html>body {font-size:small; height:auto;}
font-size: small; voice-family: "\"}\"";
voice-family: inherit; font-size: medium;}

h1, h2, h3, h4, h5, h6 {font-family: 'times new roman', arial, verdana, helvetica, serif; background-color:none;
font-style:normal; font-variant:normal; font-weight:normal; margin:14px 0 4px 10px;}
h1{font-size: 1.93em;}
h2{font-size: 1.72em;}
h3{font-size: 1.52em;}
h4{font-size: 1.42em;}
h5{font-size: 1.32em;}
h6{font-size: 1.21em;}
</style>
<link rel="stylesheet" type="text/css" href="pagina2.css">
<body bgcolor="black">
<div id="all" style="width:auto; height:100%;">
<img src="image1.jpg" class="fitit1">
<img src="alt0.jpg" class="fitit3">
<img src="image2.jpg" class="fitit1">
<img src="main.jpg" class="fitit2">
</div>
</body>

and

img.fitit1{
float:left;
height:27.5%;
width:auto;
}
img.fitit3{
float:left;
height:27.5%;
width:auto;
}
img.fitit2{
float:left;
height:72.5%;
width:auto;
}

WebJoel

05-25-2008, 09:08 AM

I might suggest not even stating width:auto;

height:value% should be enough.
Stating one of either height or width in percent and leave the other axis not declared, might work. Declaring "width" means something and might interfere with a browsers being able to correctly calculate the appropriate width to match the change of height. Declaring "height:auto ; width:auto ;" won't cause images to 'resize', so "height:27.5% ; width:auto ;" won't work either...

If this doesn't work, there is always a javascript solution. One that I've used before determines the screen-width and calculates image width/height proportionately.