Solved

scaling images

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

Assisted Solution

by:Frosty555
Frosty555 earned 250 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 51

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:knowlton
ID: 36590208
Can you give an example?
0
Master Your Team's Linux and Cloud Stack

Come see why top tech companies like Mailchimp and Media Temple use Linux Academy to build their employee training programs.

 
LVL 51

Expert Comment

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

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 51

Accepted Solution

by:
HainKurt earned 250 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:knowlton
ID: 36590462
thx
0

Featured Post

Master Your Team's Linux and Cloud Stack

Come see why top tech companies like Mailchimp and Media Temple use Linux Academy to build their employee training programs.

Question has a verified solution.

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

Suggested Solutions

Introduction Chart.js, used properly, can visually add a difference to your charting applications. It engages your visitors and allows them to interact with data they otherwise wouldn't be able to without expensive and complicated systems. For this…
Introduction JSON is an acronym for JavaScript Object Notation.  It is a text-string data transport mechanism, capable of representing simple or complex data structures in a consistent and easy-to-read manner.  Similar in concept to XML, but more e…
The viewer will learn how to dynamically set the form action using jQuery.
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…

837 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