Solved

scaling images

Posted on 2011-09-23
7
270 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 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:Huseyin KAHRAMAN
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
Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
LVL 51

Expert Comment

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

Expert Comment

by:Huseyin KAHRAMAN
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:
Huseyin KAHRAMAN 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:Tom Knowlton
ID: 36590462
thx
0

Featured Post

How our DevOps Teams Maximize Uptime

Our Dev teams are like yours. They’re continually cranking out code for new features/bugs fixes, testing, deploying, responding to production monitoring events and more. It’s complex. So, we thought you’d like to see what’s working for us. Read the use case whitepaper.

Question has a verified solution.

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

Suggested Solutions

Title # Comments Views Activity
multiple selects 23 61
JQuery Autocomplete Tag AJAX (Need nice script) 11 56
disable and enable textboxes in dataTable 7 23
Why is my $_POST not going to results page 10 32
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 …
I found this questions asking how to do this in many different forums, so I will describe here how to implement a solution using PHP and AJAX. The logical flow for the problem should be: Write an event handler for the first drop down box to get …
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…

679 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