Solved

scaling images

Posted on 2011-09-23
7
265 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
Free Trending Threat Insights Every Day

Enhance your security with threat intelligence from the web. Get trending threat insights on hackers, exploits, and suspicious IP addresses delivered to your inbox with our free Cyber Daily.

 
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

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

Introduction A frequently asked question goes something like this:  "I am running a long process in the background and I want to alert my client when the process finishes.  How can I send a message to the browser?"  Unfortunately, the short answer …
This article discusses how to create an extensible mechanism for linked drop downs.
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…

758 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

17 Experts available now in Live!

Get 1:1 Help Now