Solved

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

Posted on 2011-02-22
12
1,443 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 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
MIM Survival Guide for Service Desk Managers

Major incidents can send mastered service desk processes into disorder. Systems and tools produce the data needed to resolve these incidents, but your challenge is getting that information to the right people fast. Check out the Survival Guide and begin bringing order to chaos.

 

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

Free Tool: Site Down Detector

Helpful to verify reports of your own downtime, or to double check a downed website you are trying to access.

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.

Question has a verified solution.

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

When it comes to write a Context Sensitive Help (an online help that is obtained from a specific point in state of software to provide help with that state) ,  first we need to make the file that contains all topics, which are given exclusive IDs. …
Today it’s fairly well known that high-performing websites and applications bring in more visitors, higher SEO, and ultimately more sales. By the same token, downtime is disastrous for companies and can lead to major hits on a brand, reputation, an…
In this tutorial viewers will learn how to style rounded corners for elements in CSS using the border-radius property Begin with a normal styled element such as a div: To style all four corners of the div to be the same degree of roundness, use the …
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)

733 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