• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 1475
  • Last Modified:

Allow image of any size to auto-fit inside a div

Hi Experts
I am trying to create a website with a revolving image gallery, i want the images to autofit  a div so that the webpage will be in proportion when viewed in any screen size, i am using some javascript and css to try and achieve this, the problem is that i can only set the div size to be the same as the image sizes, what i want is for the images to auto-fit the div, hope someone can help:

Javascript

var mygallery=new SlideShow({
      wrapperid: "main", //ID of blank DIV on page to house Slideshow
      dimensions: [778, 230], //width/height of gallery in pixels.
      imagearray: [

            ["images/image1.jpg", "", "", ""],
            ["images/image2.jpg", "", "", ""],
            ["images/image3.jpg", "", "", ""],
            ["images/image4.jpg", "", "", ""]
      ],
CSS

div#main {
    margin-left: 2%;
    margin-right: 2%;
    margin-top: 0px;
    padding: 0px;
    background-color : white;
    float:left;
   
}

div#main img {
    width:100%;
    height:100%;

}
0
dizzycat
Asked:
dizzycat
  • 7
  • 5
1 Solution
 
jmnfCommented:
you have to set width and height of div and img width and height to 100% (like oyu already did):

div.withimages
{
    width: 778px;
    height: 230px;
}
div.withimages img
{
    width: 100%;
    height: 100%;
}

Open in new window


where your div is like

<div class="withimages">
    <img alt="" src="image.jpg" />
</div>

Open in new window

0
 
dizzycatAuthor Commented:
<div class="withimages">
    <img alt="" src="image.jpg" />
</div>

This may work with a single image, but how do i reference my slideshow inside the above div, at the moment this code is setting the size of the div:

dimensions: [778, 230], //width/height of gallery in pixels.
0
 
jmnfCommented:
you got me there, maybe if you can post a more complete code i may be able to help you.
0
Cloud Class® Course: CompTIA Healthcare IT Tech

This course will help prep you to earn the CompTIA Healthcare IT Technician certification showing that you have the knowledge and skills needed to succeed in installing, managing, and troubleshooting IT systems in medical and clinical settings.

 
dizzycatAuthor Commented:
Im sure that i have posted all the code that is relevant to the problem, just to recap, i need to set the size of the div width as a percentage so that it will appear in proportion in any screen size that the web-page is viewed on, this i can do but now i need my slide-show images to auto-fit to the width of the div.
0
 
jmnfCommented:
you mean so the image is not distorted and keep it's aspect ratio?
0
 
dizzycatAuthor Commented:
Yes:  I guess your going to say this is impossible.
0
 
jmnfCommented:
No, you need to pass width and height of the image with javascript so you can manipulate the dimensions dinamically.

Your width: 778px
Your height: 230px
div aspect ratio: divAR = divWidth / divHeight = 3.3826

Then get image dimensions and do the same:
imgAR = imgWidth / imgHeight

If imgAR > divAR use:
imgWidth=778px
imgHeight=auto
and center the image vertically

If imgAR < divAR use:
imgWidth =auto
imgHeight=230px
and center image horizontally

Else if imgAR = divAR
imgWidth=778px
imgHeight=230px
no centering necessary

Let me play around with some javascript code to give you a more complete answer.
0
 
jmnfCommented:
Tried with the following code, but couldn't make it work... yet, will keep trying later or tomorrow.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

	<head>
		<title>Slideshow Correct Image Aspect Ratio</title>

			<meta http-equiv="content-type" content="text/html;charset=utf-8" />
			<meta name="generator" content="Geany 0.19" />
			
			<script type="text/javascript">
				
				function resizeImage()
				{
					var img2 = document.getElementById("imgInsideDiv");
					var img2 = new Image();
					img2.src = "http://www.google.com/intl/en_ALL/images/srpr/logo1w.png"; //any image url... absolute, relative, javascript variable.
					//img2.setAttribute("src", "http://www.google.com/intl/en_ALL/images/srpr/logo1w.png"); //also tried this way, no luck
					var img2width = img2.width;
					var img2height = img2.height;
					
					var imgAR = img2width / img2height;
					var divAR = 778 / 230; //you can also use variables to set and get div width and height, and change accordingly throughout the script/remove from css
					var diffAR = imgAR - divAR;
					
					if ((img2width < 778) && (img2height < 230))
					{
						img2.className="imgSmall"
					}
					else
					{
						if (diffAR == 0)
						{
							img2.className="imgFull"
						}
						else
						{
							if (diffAR < 0)
							{
								img2.className="imgTall"
							}
							else
							{
								img2.className="imgWide"
							}
						}
					}
					document.getElementById("control").innerText  = img2width + img2height + imgAR + divAR + diffAR;
				}
				
				window.onload=resizeImage();
			</script>
			<style>
				#externalDiv
				{
					width: 778px;
					height: 230px;
					background-color: #cccccc;
					text-align: center;
					vertical-align: middle;
					padding: auto auto;
				}
				img
				{
					display: block;
					background-color: #ff0000;
				}
				.imgWide
				{
					width: 778px;
					height: auto;
					margin: auto 0;
				}
				.imgTall
				{
					width: auto;
					height: 230px;
					margin: 0 auto;
				}
				.imgFull
				{
					width: 778px; /* or 100% */
					height: 230px; /* or 100% */
					margin: 0;
				}
				.imgSmall
				{
					margin: auto auto;
				}
			</style>

	</head>

	<body>
		<div id="externalDiv">
			<img alt="" id="imgInsideDiv" class="imgSmall" />
		</div>
	</body>
</html>

Open in new window

0
 
dizzycatAuthor Commented:
Thanks for the time you are putting into this!

0
 
jmnfCommented:
Ok, this one works for me in Firefox 3.6, haven't check other browsers.
It takes the image source from javascript so you can modify it change image dinamically.
The only problem i saw was that sometimes the image showed in full size and on refresh did what was ordered.

I'll pass it to you as a file, modify it to fit your needs.

 slideshow.html
0
 
jmnfCommented:
Just checked the code in IE8, Chrome 8, Opera 11 (all in windows) and it works... sometimes refresh needed.

I forgot to tell you that you have to chose 1 image source (img2.src) and hide the rest while testing.
Included several size image sources in script.
0
 
dizzycatAuthor Commented:
That's great, i have modified my code and my images are auto-sizing to the size of the div, thank-you for all your help imnf.
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

Join & Write a Comment

Featured Post

Free Tool: IP Lookup

Get more info about an IP address or domain name, such as organization, abuse contacts and geolocation.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

  • 7
  • 5
Tackle projects and never again get stuck behind a technical roadblock.
Join Now