Get Image Height according to width in .load() - javascript

I need to get Image height and width before loading the Image itself. So I am using jquery .load() method.
$('<img />').attr('src',someURL).load(function(){
console.log(this.width);
console.log(this.height);
})
But problem is that I need the height according to the fix width. Suppose Image is of size 400*417, I need the height according to 200 not 400. For that I add
$('<img />').attr({
'src':someURL,
'width':200}).load(function(){
//Get height and width
})
But Above code is again giving me height 417 not according to width of 200. I am looking for js/jquery/angualrjs. Please help.
Thanks In Advance :)

A bit of math will do the trick. Once you get the actual image dimensions, apply your ratio to get the height you want.
For instance :
$('<img />').attr('src',someURL).load(function(){
console.log(this.width); // prints out 400
console.log(this.height); // prints out 417
var widthIWant = 200;
var heightIWant = this.height * widthIWant / this.width; // Gives you 208.5
})

Related

Jquery Resize object on window resize and keep aspect ratio

I am trying to make a "flip book" using jquery and have started with a plugin that I bought.
I customized the JS to get the book to resize to 100% of the window when the browser is resized, and set max sizes because I do not want the images to grow larger than their original size.
With all that said, I have been trying to get the images to retain their aspect ratio when resized. I looked around online but couldn't find anything to help me with this. Does anyone have any ideas on how to accomplish this? Please let me know if you need more info or clarification.
EDIT:
The book element is resized with JS up to the max size of the images.
When the book is resized to anything smaller than its max size, the book's height and width become 100% of the window.
I need some JS to make the book keep its aspect ratio.
EX- window is resized to be very wide (large width) but very short (small height).
Currently the book will stretch and fill the very large width which distorts the image because the height is too small.
How do I make the width scale down to compensate for the small height (and vice versa)?
Thanks to everyone in advance!
Here is the Fiddle
#mybook {
margin:0 auto;
}
body {
overflow:hidden;
}
img {
max-height:300px;
max-width:300px;
}
Look at this code: http://ericjuden.com/2009/07/jquery-image-resize/
$(document).ready(function() {
$('.story-small img').each(function() {
var maxWidth = 100; // Max width for the image
var maxHeight = 100; // Max height for the image
var ratio = 0; // Used for aspect ratio
var width = $(this).width(); // Current image width
var height = $(this).height(); // Current image height
// Check if the current width is larger than the max
if(width > maxWidth){
ratio = maxWidth / width; // get ratio for scaling image
$(this).css("width", maxWidth); // Set new width
$(this).css("height", height * ratio); // Scale height based on ratio
height = height * ratio; // Reset height to match scaled image
width = width * ratio; // Reset width to match scaled image
}
// Check if current height is larger than max
if(height > maxHeight){
ratio = maxHeight / height; // get ratio for scaling image
$(this).css("height", maxHeight); // Set new height
$(this).css("width", width * ratio); // Scale width based on ratio
width = width * ratio; // Reset width to match scaled image
height = height * ratio; // Reset height to match scaled image
}
});
});
Or you could do it with css:
<div style="height: 100px">
<img src="http://www.getdigital.de/images/produkte/t4/t4_css_sucks2.jpg"
style="max-height: 100%; max-width: 100%">
</div>
There is not really enough technical information in your question to be able to give you a good answer, but this is typically a problem that can be solved using CSS. It shouldn't require any JS/jQuery.
The tag naturally keeps the aspect ratio of the image if you set something like:
img {
width: 100%;
height: auto;
}
Alternatively, you could set the image as a background image and use the CSS property
.image {
background-size: contain;
}
to make sure the image uses the most of the available width and height.
As I see, you are resizing with JavaScript the container div of the images. So, you can set the following CSS to make the image always fit in that div and maintain their aspect ratio.
img {
max-height:100%;
max-width:100%;
}
Here is a fiddle.

Getting the height of an image in javascript

I have this image : <img style="border-bottom-right-radius:0px;" id="cover_image" src="Daft+Punk+Tron+Legacy.jpg" alt="cover" width="851" /> , I have set the width of the image and the photo automatically keeps aspect ratio and resize both width to 851 and height to a certain value, I want to grab the height value with Javascript but it's not working
So far I have tried this:
$(document).ready(function() {
alert($("#cover_image").height());
});
When I try
$(document).ready(function() {
alert($("#cover_image").width());
});
it works and it shows 851 which is the correct value of the width, but when I use height is returns 0.. can you point me in the right direction please ?
Use onload event of the image:
$("#cover_image").on('load',function(){
if(this.complete) alert($(this).height());
});
clientWidth and clientHeight are DOM properties that show the current in-browser size of the inner dimensions of a DOM element (excluding margin and border). So in the case of an IMG element, this will get the actual dimensions of the visible image.
var img = document.getElementById('imageid');
//or however you get a handle to the IMG
var width = img.clientWidth;
var height = img.clientHeight;
Thanks
AB

Getting image dimensions for images that do not have width and height specified in source

I want to get the height and width of an image that does not have its width and height tag specified in the HTML source.
ie
<img src="http://www.mysite.com/imge.jpg" id="my_img" />
What I want to do is get the image's width and the height before it loads up. I am trying to achieve the following task, if you know a better solution please suggest me.
I want to do this because I would like to keep all of the images in my site to less than or equal to 600px. So if an image's width > 600px, I reduce it to 600px. Or else I leave its width unchanged.
My tryouts: None of the codes below work for this task, as they get the image's size once the image is loaded; initially they display zero for width.
<script type="text/javascript">
var img = document.getElementById('my_img');
var width = img.clientWidth;
var height = img.clientHeight;
alert('Width: ' + width + ' Height:' + height); // FAIL
var timg = document.getElementById('test').width;
alert(timg); // FAIL too
</script>
My HTML code:
<img src="http://www.mysite.com/imge.jpg" id="my_img" />
Hope this is clear.
Thank you.
jsFiddle
Why use JavaScript? With this CSS rule you can limit the width to 600px:
#my_img { max-width:600px; }

Get image size using JQuery/ javascript

please tell me how to get image size of all images in the page using jquery or javascript
The only size you can get is the visible size. clientWidth and clientHeight are two DOM properties which do this. Example:
var image = document.getElementById("id");
var width = image.clientWidth;
var height = image.clientHeight;
If you're using jQuery, you can simply use $.width and $.height:
var width = $("id").width();
var height = $("id").height();
So, to get the size of all images, loop them through:
$("img").each(function()
{
console.log(this.width());
console.log(this.height());
});
If you need the real size, please see this question Get the real width and height of an image with JavaScript? (in Safari/Chrome)
$('img').each(function() {
$(this).width(); // current image's width
$(this).height(); // current image's height
});
please tell me how to get image size
of all images in the page using jquery
or javascript
You can use width() and height() method of jQuery:
$('img').each(function(){
alert('width=' + $(this).width() + '\nHeight=' + $(this).height());
});
More Info:
http://api.jquery.com/width/
http://api.jquery.com/height/

width() not returning a value

I have an image in a page that I am trying to get the width of.
<img class="zoomerIcon" src="zoomer.png" />
So I'm trying to get the width like this.
var imageWidth = $('.zoomerIcon').width();
However the value is 0 unless I set the width property in the tag.
Does width() only return a width greater than 0 if it's manually set in the property? You can see the whole script here.
http://www.wantedcreative.com/development/zoomer/index.html
Thanks
Update
Sorry, I should have looked at your source first. Here is how you need to change your code. The important thing to realize, is you can't get the width until the image has fully loaded. That is why I use a load event callback to retrieve the widths:
// Create the img element, add a load handler, then append it to the body
var $img = $('<img class="zoomIcon" alt="zoom icon" />').load(function(e){
// get icon image properties for use with animation
var imageWidth = $(this).width();
var imageHeight = $(this).height();
// ... any code that uses these variables needs to go in here ...
}).attr('src', zoomImage).appendTo( document.body );
Original Answer: This is general information.
You are probably putting this code in document.ready which will try to retrieve the width before the image has loaded. Try this instead:
$(window).load(function(){
var imageWidth = $(".zoomer").width();
alert( imageWidth ); // Should be correct
});

Categories

Resources