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.

Code:

#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:

Code:

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

Thread: Help with images in a resized DIV

Thread Tools

Search Thread

Help with images in a resized DIV

Bookmarks

Bookmarks

Posting Permissions