Solved

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

Posted on 2011-02-22
12
1,432 Views
Last Modified: 2012-05-11
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
Comment
Question by:dizzycat
  • 7
  • 5
12 Comments
 
LVL 4

Expert Comment

by:jmnf
ID: 34954635
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
 

Author Comment

by:dizzycat
ID: 34954819
<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
 
LVL 4

Expert Comment

by:jmnf
ID: 34955069
you got me there, maybe if you can post a more complete code i may be able to help you.
0
 

Author Comment

by:dizzycat
ID: 34955217
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
 
LVL 4

Expert Comment

by:jmnf
ID: 34955278
you mean so the image is not distorted and keep it's aspect ratio?
0
 

Author Comment

by:dizzycat
ID: 34955318
Yes:  I guess your going to say this is impossible.
0
3 Use Cases for Connected Systems

Our Dev teams are like yours. They’re continually cranking out code for new features/bugs fixes, testing, deploying, testing some more, responding to production monitoring events and more. It’s complex. So, we thought you’d like to see what’s working for us.

 
LVL 4

Expert Comment

by:jmnf
ID: 34955465
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
 
LVL 4

Expert Comment

by:jmnf
ID: 34956970
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
 

Author Comment

by:dizzycat
ID: 34959487
Thanks for the time you are putting into this!

0
 
LVL 4

Expert Comment

by:jmnf
ID: 34962807
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
 
LVL 4

Accepted Solution

by:
jmnf earned 500 total points
ID: 34962852
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
 

Author Closing Comment

by:dizzycat
ID: 34964062
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

Featured Post

Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

Title # Comments Views Activity
Show confirmation alert in Jquery 14 43
Office 365 Pass Username an Password in URL 3 43
Message not shown 5 33
Interview question Javascript, database 12 31
International Data Corporation (IDC) prognosticates that before the current the year gets over disbursing on IT framework products to be sent in cloud environs will be $37.1B.
This article discusses how to create an extensible mechanism for linked drop downs.
This tutorial walks through the best practices in adding a local business to Google Maps including how to properly search for duplicates, marker placement, and inputing business details. Login to your Google Account, then search for "Google Mapmaker…
The viewer will learn how to dynamically set the form action using jQuery.

910 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

19 Experts available now in Live!

Get 1:1 Help Now