• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 291
  • Last Modified:

scaling images

Can jQuery scale in image to size of the containing div?
0
Tom Knowlton
Asked:
Tom Knowlton
  • 4
  • 2
2 Solutions
 
Frosty555Commented:
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
 
HainKurtSr. System AnalystCommented:
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
 
Tom KnowltonWeb developerAuthor Commented:
Can you give an example?
0
What does it mean to be "Always On"?

Is your cloud always on? With an Always On cloud you won't have to worry about downtime for maintenance or software application code updates, ensuring that your bottom line isn't affected.

 
HainKurtSr. System AnalystCommented:
scale means, preserve the ratio?
0
 
HainKurtSr. System AnalystCommented:
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
 
HainKurtSr. System AnalystCommented:
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
 
Tom KnowltonWeb developerAuthor Commented:
thx
0

Featured Post

Concerto's Cloud Advisory Services

Want to avoid the missteps to gaining all the benefits of the cloud? Learn more about the different assessment options from our Cloud Advisory team.

  • 4
  • 2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now