PDA

Click to See Complete Forum and Search --> : divs, images and resizing

IxxI
04-27-2003, 10:43 AM
I have posted this question in the CSS forum and it was suggested I move it here...
I have a div in which I display images, if the image is bigger than the div, it resizes itself to fit the picture, is there any way to make it so that if the image is bigger than the div, it resizes itself so that it is small enough to fit, but also so that if an image is smaller than the div, it does not resize itself but displays at the size it was supposed to.
Thanks

IxxI
IxxI
04-27-2003, 01:36 PM
Yes please if thats not too much to ask, thanks Dave.

IxxI
IxxI
04-27-2003, 04:20 PM
Thanks Dave, but I just realised I didn't explain myself very well. I shall try and do it better - and sorry for wasting your time. I have a div, but the catch is that I already have an image in it (blank). Using the document.images["divimg"].src="whatever.gif" method, that picture changes dynamically, depending on what the user has clicked on/moved their mouse over etc. Unfortunately, some of the pictures that are called into this div are larger than the div (hence the resizing question). However, I do not want the div to change size, as it messes up the layout of the page. One way to do it would be to resize the images themselves so that they fit, but at smaller resolutions most of the images would have to be cut down, which would make them difficult to see in higher resolutions. Therefore I was looking for a general way to check whether the image being loaded into the <img> in the div, was bigger than the div or not, and if so adding width and height attributes to the image so it is only as big as the div. Sorry again, and I hope that that was better explained, and makes some sense...

IxxI
IxxI
04-28-2003, 03:00 AM
I was just wondering if there was any way to do that on the fly, so I don't have to check them at all resolutions, something like if (img1.width>div1.width) {img1.width==div1.width}, is that possible?
Thanks again,

IxxI
gil davis
04-28-2003, 06:29 AM
This might give you an idea of how you might go about it:<head>
<script>
var img1 = new Image();
img1.onload = change;

function change() {
h = document.getElementById("d1").offsetHeight;
w = document.getElementById("d1").offsetWidth;
dh = img1.height - h;
dw = img1.width - w;
if ((img1.width <= w) && (img1.height <= h))
{document.i1.src = img1.src;
document.i1.width = img1.width;
document.i1.height = img1.height;}
else
{document.i1.src = img1.src;
if (dw > dh)
{document.i1.width = w;
document.i1.height = w * img1.height / img1.width;}
else
{document.i1.height = h;
document.i1.width = h * img1.width / img1.height;}
}
}

function init() {
img1.src = "lilguy2.gif";
}
</script>
</head>
<body onload="init()">
<div id="d1" style="border: 1pt solid black; width: 200px; height: 200px">
<img name="i1" src="blank.gif" width=100% height=100%>
</div>
</body>
This does not center the image in the div, it merely adjusts the size of the image. If centering is necessary, you could add more code to adjust the top and left of the image to do so. Also, I have only tested this in IE 5.5, but I know that it will not work in NS 4.
IxxI
04-28-2003, 06:42 AM
Thanks very much gil, just what I was looking for.

IxxI
IxxI
04-28-2003, 10:14 AM
Sorry to post again. I've tried the code and I can't get it to work (using ie6). I think its because I'm trying to modify it - as I'm loading lots of different images into the one image box, I'm using a variable to write my image names to so for example I've got:

welcome2=new Image();
welcome2.src="welcome2.gif";

then when I move my mouse over a link I'm writing "welcome2" to a variable (piclinks) and trying to call that back in your code by using +piclinks+, but before I even add the link in to call the function I'm getting errors. Any ideas??
Here's the modified code, I'm fairly sure I've messed it up but can't see what I can do:


function change() {
h = document.getElementById("pic").offsetHeight;
w = document.getElementById("pic").offsetWidth;
dh = ''+piclinks+'.height - h';
dw = ''+piclinks+'.width - w';
if ((''+piclinks+'.width' <= w) && (''+piclinks+'.height' <= h))
{document.images.boxpic.src = ''+piclinks+'.src';
document.images.boxpic.width = ''+piclinks+'.width';
document.images.boxpic.height = ''+piclinks+'.height';}
else
{document.images.boxpic.src = ''+piclinks'.src';
if (dw > dh)
{document.images.boxpic.width = w;
document.images.boxpic.height = w * ''+piclinks+'.height' / ''+piclinks+'.width';}
else
{document.images.boxpic.height = h;
document.images.boxpic.width = h * ''+piclinks+'.width' / ''+piclinks+'.height';}
}
}


Thanks,

IxxI
gil davis
04-28-2003, 11:41 AM
You didn't need to change anything in the function change(). Just change img1.src to the file you want and change() will fire automatically.<head>
<script>
var img1 = new Image();
img1.onload = change;

function change() {
h = document.getElementById("d1").offsetHeight;
w = document.getElementById("d1").offsetWidth;
dh = img1.height - h;
dw = img1.width - w;
if ((img1.width <= w) && (img1.height <= h))
{document.i1.src = img1.src;
document.i1.width = img1.width;
document.i1.height = img1.height;}
else
{document.i1.src = img1.src;
if (dw > dh)
{document.i1.width = w;
document.i1.height = w * img1.height / img1.width;}
else
{document.i1.height = h;
document.i1.width = h * img1.width / img1.height;}
}
}

function init() {
img1.src = "lilguy2.gif";
}
</script>
</head>
<body onload="init()">
<div id="d1" style="border: 1pt solid black; width: 200px; height: 200px">
<img name="i1" src="blank.gif" width=100% height=100%>
</div>
<a href="#" onclick="img1.src='lilguy2.gif';return false;">Little guy</a><br>
<a href="#" onclick="img1.src='Atlasgnt.jpg';return false;">Atlas Gantry</a><br>
<a href="#" onclick="img1.src='forumlogo1.gif';return false;">Forum logo</a><br>
<a href="#" onclick="img1.src='oval.gif';return false;">Oval</a>
</body>Just change the image in the text links. Use any images you want. You could do it in the mouseover event instead if you want. You could also add a preload script.
IxxI
04-29-2003, 06:40 AM
I see - sorry - just me being stupid....

IxxI
IxxI
04-29-2003, 07:06 AM
Sorry to post again, but I have tried doing it by varying what img1.src is but am having no luck getting it to work. The page loads fine but it doesn't seem to modify the size of the picture if it is bigger. The only thing I'm changing in your code is document.i1.src to document.images.boxpic.src, and d1 to pic1. At first I thought it might be something to do with img1.onload, but even when shoving a command in an onClick box to change() it doesn't seem to do anything. Does it matter that I'm doing it with preloaded images (so I just write img1.src=welcome.src)? And also does it matter that I'm using a percentage for width and height of my div? Thanks again,

IxxI
gil davis
04-29-2003, 07:46 AM
does it matter that I'm using a percentage for width and height of my div?I apparently had an ideal case when I made the DIV square. I wasn't picking the size as a ratio. Here is the fix:function change() {
h = document.getElementById("d1").offsetHeight;
w = document.getElementById("d1").offsetWidth;
// dh = img1.height - h;
// dw = img1.width - w;
dh = Math.floor(h / img1.height);
dw = Math.floor(w / img1.width);
if ((img1.width <= w) && (img1.height <= h))
{document.i1.src = img1.src;
document.i1.width = img1.width;
document.i1.height = img1.height;}
else
{document.i1.src = img1.src;
if (dw > dh)
{document.i1.width = w;
document.i1.height = Math.floor(w * img1.height / img1.width);}
else
{document.i1.height = h;
document.i1.width = Math.floor(h * img1.width / img1.height);}
}
}There seems to be something going on where IE leaves about an 8px margin even when I specify 0. You can subtract a "fudge factor" of 8 from "h" and "w", if that bothers you. That fudge factor is probably different for NS 6+ and Mozilla.
IxxI
04-29-2003, 08:16 AM
I found the problem. You had the sign the wrong way in the line if (dw > dh). For the code afterwards it should have been if (dw<dh) otherwise you were creating something with a height greater than that of the box. Thanks very much for all your help, absolutely brilliant! :)

IxxI