?
Solved

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

Posted on 2011-02-22
12
Medium Priority
?
1,449 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
Not sure which OpenStack Certification to get?

So you’ve realized you might want to get certified in OpenStack, but you’re not sure what the benefits might be or even which one you should take. You know there are several certification courses you can choose from, but how do you know which one is right for you?

 

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

On Demand Webinar - Networking for the Cloud Era

This webinar discusses:
-Common barriers companies experience when moving to the cloud
-How SD-WAN changes the way we look at networks
-Best practices customers should employ moving forward with cloud migration
-What happens behind the scenes of SteelConnect’s one-click button

Question has a verified solution.

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

Dramatic changes are revolutionizing how we build and use technology. Every company is automating, digitizing, and modernizing operations. We need a better, more connected way to work together as teams so we can harness the insights from our system…
Q&A with Course Creator, Mark Lassoff, on the importance of HTML5 in the career of a modern-day developer.
This tutorial will teach you the core code needed to finalize the addition of a watermark to your image. The viewer will use a small PHP class to learn and create a watermark.
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)
Suggested Courses

771 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