Log in

View Full Version : Help with images in a resized DIV


mwschenck
08-05-2008, 04:57 PM
I have the page below, and what I need is for all of the images to resize to the DIV that is resized according to the screen height.

I tried it in a table, and not in a table (below), and the images go beyond the height of the resized div.

Assuming each of the 18 base image sizes is 100x x 200h. 2 columns of 9 images


Thank you


---------------

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" >
<head>
<title>One Hundred Percent Height Divs</title>
<style type="text/css" media="screen">
body {
margin:0;
padding:0;
height:100%; /* this is the key! */
}
#left {
position:absolute;
left:0;
top:0;
padding:0;
width:200px;
height:100%; /* works only if parent container is assigned a height value */
color:#333;
background:#eaeaea;
border:1px solid #333;
}
.content {
margin-left:220px;
margin-right:220px;
margin-bottom:20px;
color:#333;
background:#ffc;
border:1px solid #333;
padding:0 10px;
}

</style>
</head>

<body>
<div id="left">


<img class="button" name="menu_r1_c1" src="images/prev.jpg" border="0">
<img class="button" name="menu_r1_c1" src="images/next.jpg" border="0">
<br>

<img class="button" name="menu_r1_c1" src="images/first.jpg" border="0">
<img class="button" name="menu_r1_c1" src="images/last.jpg" border="0">
<br>

<img class="button" name="menu_r1_c1" src="images/1.jpg" border="0">
<img class="button" name="menu_r1_c1" src="images/2.jpg" border="0">
<br>

<img class="button" name="menu_r1_c1" src="images/3.jpg" border="0">
<img class="button" name="menu_r1_c1" src="images/4.jpg" border="0">
<br>

<img class="button" name="menu_r1_c1" src="images/5.jpg" border="0">
<img class="button" name="menu_r1_c1" src="images/6.jpg" border="0">
<br>

<img class="button" name="menu_r1_c1" src="images/7.jpg" border="0">
<img class="button" name="menu_r1_c1" src="images/8.jpg" border="0">
<br>

<img class="button" name="menu_r1_c1" src="images/9.jpg" border="0">
<img class="button" name="menu_r1_c1" src="images/a.jpg" border="0">
<br>

<img class="button" name="menu_r1_c1" src="images/bv.jpg" border="0">
<img class="button" name="menu_r1_c1" src="images/c.jpg" border="0">
<br>

<img class="button" name="menu_r1_c1" src="images/d.jpg" border="0">
<img class="button" name="menu_r1_c1" src="images/e.jpg" border="0">
<br>

</div>
</body>
</html>
Medyman
08-05-2008, 07:58 PM
So you want each image to have completely fill the #left div? Meaning 100% height and 100% width.

You could just set that in the CSS.


#left img {
height:100%;
width:100%;
}
mwschenck
08-05-2008, 09:52 PM
i do that, but when it opens, it takes the first image and resizes it to fit 100% of that DIV, then the remaining images are that same huge size, under that DIV

so i put all of them into a table, and it didnt resize at all.

making one image, and then mapping each hot spot is fine until it resizes larger, then the map is off???
Medyman
08-06-2008, 12:51 AM
Do you have a link to your page? I'm having trouble visualizing what you're talking about here. I'm sure what you want to do is a very easy thing to accomplish but I'll need to see the page to make sure I'm understanding the issue correctly.
mwschenck
08-06-2008, 01:16 PM
yes

http://www.crlaurence.com/adv/z1/open.html
Medyman
08-06-2008, 01:52 PM
Ok, I'm still not getting what you want here.

1) Do you want all of the images to be 100% the height and width of div#left? If so, why doesn't img.button { height:100%; width:100% } work? Is it because the images overflow from div#left?

2) Do you want all of the images to fit inside div#left? So, are you looking for a way to dynamically resize the images so that they ALL fit inside div#left? Does div#left HAVE to be 98% x 200px? Will there always be 9 rows of 2? Should the width of the images resize as well to fill div#left or should it resize proportionally to the height of the image?

I think you're looking for #2. Please answer those questions and I'll show you the code.
mwschenck
08-06-2008, 03:48 PM
#2

the height will always be 98% of the screen height. (screen height depends on each users available height)

the height and width of each image would scale proportionately.

the width of the #left is set

always 9 rows, 8 have two, the last row has one


thank you
Medyman
08-07-2008, 12:45 PM
See, I knew it was simple. It just took a while to understand what you were talking about. Add the following to your CSS:


img.button {
height:10.5%;
}
mwschenck
08-07-2008, 04:28 PM
thank you, works great in IE

but not ff
TheJoshMan
08-07-2008, 04:34 PM
yes was just about to point out that in FF the entire window goes on the fritz if you resize it after adding that code. (or maybe my computer is just dumb) LOL
Medyman
08-08-2008, 12:50 PM
thank you, works great in IE

but not ff

Really? I tested it in Fx 3 and it works fine. I don't have Fx 2 available on this computer to test.

I did remove all the extraneous CSS (#content, #right, etc...) styles before I tested though. Perhaps, that has an effect?