Improve company productivity with a Business Account.Sign Up

x
?
Solved

scaling images

Posted on 2011-09-23
7
Medium Priority
?
294 Views
Last Modified: 2012-05-12
Can jQuery scale in image to size of the containing div?
0
Comment
Question by:Tom Knowlton
  • 4
  • 2
7 Comments
 
LVL 31

Assisted Solution

by:Frosty555
Frosty555 earned 1000 total points
ID: 36590088
If your image is in an IMG tag you can set the width and height of the img to the width and height of your DIV. You'd use the jquery "width()" and "height()" functions:

http://api.jquery.com/width/
http://api.jquery.com/height/
0
 
LVL 61

Expert Comment

by:HainKurt
ID: 36590207
no need for jQuery


<img src="http://indianahumanities.net/wp-content/uploads/2011/08/cat2.jpg">

<div style="width:300;height:200">
<img src="http://indianahumanities.net/wp-content/uploads/2011/08/cat2.jpg" style="width:100%;height:100%">
</div>

Open in new window

0
 
LVL 5

Author Comment

by:Tom Knowlton
ID: 36590208
Can you give an example?
0
Free Tool: Subnet Calculator

The subnet calculator helps you design networks by taking an IP address and network mask and returning information such as network, broadcast address, and host range.

One of a set of tools we're offering as a way of saying thank you for being a part of the community.

 
LVL 61

Expert Comment

by:HainKurt
ID: 36590222
scale means, preserve the ratio?
0
 
LVL 61

Expert Comment

by:HainKurt
ID: 36590389
I made this sample:

hope you find it useful
<html>
<head>
			<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript" ></script>

<script>
$(document).ready(function() {
  $(".divImg img").each(function(index){

  //alert($(this).src + " : " + this.width + " - "+ this.height);

  var d = $(this).parent();
  var i = $(this);

  /*
  alert(d.width() + " - " + d.height() + " --> " + d.attr("w") + " - " + d.attr("h"));
  $(d).width(d.attr("w"));d.height(d.attr("h"));
  alert(d.width() + " - " + d.height());
  */

  var w = d.attr("w");
  var h = d.attr("h");

  var rd = w/h;
  var ri = $(this).width() / $(this).height();

  //alert(rd + " : " + ri);

  if (rd>=ri) {
  	//i.height(i.width()* (ri/rd)); 
  	i.height(h); 
  	}
  if (rd<ri) {
  	//i.width(i.height()* (rd/ri)); 
  	i.width(w);
  	}

	d.width(w);
	d.height(h);

  });
});
</script>
</head>
<body>

<div class="divImg" style="border:1px solid silver" w=600 h=200>
<img src="http://indianahumanities.net/wp-content/uploads/2011/08/cat2.jpg">
</div>

<div class="divImg" style="border:1px solid silver" w=100 h=100>
<img src="http://indianahumanities.net/wp-content/uploads/2011/08/cat2.jpg">
</div>

<div class="divImg" style="border:1px solid silver" w=200 h=300>
<img src="http://indianahumanities.net/wp-content/uploads/2011/08/cat2.jpg">
</div>

</body>
</html>

Open in new window

0
 
LVL 61

Accepted Solution

by:
HainKurt earned 1000 total points
ID: 36590396
you add  w & h attributes to div, leave image as is then jQuery scales image to fit into that div and sets divs width & height (maybe we can just use style="width:xxx; height:yyy" on div element and use

  var w = d.attr("w");
  var h = d.attr("h");
-->
  var w = d.width();
  var h = d.height();

result should be same...
0
 
LVL 5

Author Closing Comment

by:Tom Knowlton
ID: 36590462
thx
0

Featured Post

The 14th Annual Expert Award Winners

The results are in! Meet the top members of our 2017 Expert Awards. Congratulations to all who qualified!

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

What is a Lightbox? A Lightbox is the effect you see when you click, for example, an image and the screen fades out and up pops the same image but in its full size dimensions. There are lots of Lightbox effects for jQuery. Problem is they are a…
This article discusses how to implement server side field validation and display customized error messages to the client.
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)
The viewer will learn the basics of jQuery including how to code hide show and toggles. 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…

595 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