Solved

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

Posted on 2011-02-22
12
1,429 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
Comment Utility
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
Comment Utility
<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
Comment Utility
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
Comment Utility
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
Comment Utility
you mean so the image is not distorted and keep it's aspect ratio?
0
 

Author Comment

by:dizzycat
Comment Utility
Yes:  I guess your going to say this is impossible.
0
Enabling OSINT in Activity Based Intelligence

Activity based intelligence (ABI) requires access to all available sources of data. Recorded Future allows analysts to observe structured data on the open, deep, and dark web.

 
LVL 4

Expert Comment

by:jmnf
Comment Utility
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
Comment Utility
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
Comment Utility
Thanks for the time you are putting into this!

0
 
LVL 4

Expert Comment

by:jmnf
Comment Utility
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
Comment Utility
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
Comment Utility
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

Enabling OSINT in Activity Based Intelligence

Activity based intelligence (ABI) requires access to all available sources of data. Recorded Future allows analysts to observe structured data on the open, deep, and dark web.

Join & Write a Comment

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.
"In order to have an organized way for empathy mapping, we rely on a psychological model and trying to model it in a simple way, so we will split the board to three section for each persona and a scenario and try to see what those personas would Do,…
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 how to count occurrences of each item in an array.

772 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

10 Experts available now in Live!

Get 1:1 Help Now