Auto resize image according to dhtmlwindow Size

**Gulsaes** · 02-12-2009, 07:02 AM

1) Script Title: DHTML Window widget (v1.1)

2) Script URL (on DD): http://www.dynamicdrive.com/dynamicindex8/dhtmlwindow/

3) Describe problem:

I'm wanting to have an Image auto resize according to the size of the popup ajax widget, ie if a person resizes the window the image adjusts accordingly

I have tried

Code:

<script type="text/javascript">

function resizeImage()
{
var window_height = document.body.clientHeight
var window_width = document.body.clientWidth
var image_width = document.images[0].width
var image_height = document.images[0].height
var height_ratio = image_height / window_height
var width_ratio = image_width / window_width
if (height_ratio > width_ratio)
{
document.images[0].style.width = "auto"
document.images[0].style.height = "100%"
}
else
{
document.images[0].style.width = "100%"
document.images[0].style.height = "auto"
}
}
</script>

<body onresize="resizeImage()">
<center><img onload="resizeImage()" margin="0" border="0" src="MyImage.jpg"></center>
</body>

Any ideas if this is possible ?

**Gulsaes** · 02-16-2009, 01:32 PM

sorry to bump this post, But has anyone got an idea on how i can get an image to resize itself automatically based on the size of the window...

ie if a person drags the window bigger the image resizes accordingly ?

**davidpoor** · 02-24-2009, 07:02 PM

Part of the issue may be what type of dhtmlwindow you have. I am using inline windows and iframe windows. I believe that my solution may work for all types. What I do is create a onresize event similar to the onclose event so that you can put in a custom event handler.

First, in the source: add the following line in red after the t.onclose definition:

t.onclose=function(){return true} //custom event handler "onclose"
t.onresize=function(){}

Then, add a call to the function in both the setSize function and the resize function:

setSize:function(t, w, h){ //set window size (min is 150px wide by 100px tall)
t.style.width=Math.max(parseInt(w), 150)+"px"
t.contentarea.style.height=Math.max(parseInt(h), 100)+"px"
t.onresize();
},

resize:function(t, e){
t.style.width=Math.max(...
t.contentarea.style.height=Math.max(...
t.onresize();
},

Now you can override the default (null) function in your javascript:

mywindow.onresize=function(){.. resize your image or whatever ..}

I believe that this approach will work for any type of dhtmlwindow or dhtmlmodal.

**Gulsaes** · 02-25-2009, 06:38 AM

Thanks i'll give that a try

Thread: Auto resize image according to dhtmlwindow Size

Thread Tools

Search Thread

Auto resize image according to dhtmlwindow Size

Bookmarks

Bookmarks

Posting Permissions