Finding an Image's Width After Adding a CSS Class via Javascript

Question

I have a script setup that detects whether an image is portrait or landscape. In this case the image is landscape. What I want to do is crop and center the image using absolute positioning, setting the height to 100% and giving it a negative margin-left based on half the image's width.

I was able to do the above but here's the the problem I'm running into: The images I'm using all have variable widths/heights due to each of them being called from an API (in this case the Spotify API). That being said I had to use some Javascript to find their correct width. Its doing just that but only before I add the class landscape, so in actuality its dividing the image width before being resized to fit in the 250px x 250px #container div using the css from that class.

What I want it to do is divide the image's width after after its been resized using the properties from the landscape class.

HTML

<div id="container">
  <img src="https://i.scdn.co/image/9c4880556288e2f4d098a104f5125e477611be32" >
</div>

CSS

#container {height: 250px; width: 250px; overflow: hidden; position: relative;}

.landscape {position: absolute; height: 100%; left: 50%;}

.portrait {width: 100%;}

JS

$(function() {
    var $img       = $('img'),
        $imgHeight = $img.height(),
        $imgWidth  = $img.width();  

    if ($imgWidth > $imgHeight) {
        $img
            .addClass('landscape')
            .css({
                marginLeft: '-' + $imgWidth / 2 + 'px',
            });
    } else {
        $img.addClass('portrait');
    }
});

possible duplicate of [How to get image size (height & width) using JavaScript?](http://stackoverflow.com/questions/623172/how-to-get-image-size-height-width-using-javascript) — Refilon, Oct 28 '14 at 15:33
Are you using multiple `` elements per page that you want this script to run on? If so, you'll need an `each` function. — Bram Vanroy, Oct 28 '14 at 15:37
@Bram Vanroy I'm using one image as an avatar per page but will most likely be using more through an index page. Thanks for the heads up. — Carl Edwards, Oct 28 '14 at 15:43

score 2 · Accepted Answer · answered Oct 28 '14 at 15:34

You should refetch the width after you applied the class. In your example you're using a cached width from before you actually applied the class. Working code:

$(function() {
    var $img       = $('img'),
        $imgHeight = $img.height(),
        $imgWidth  = $img.width();  

    if ($imgWidth > $imgHeight) {
        $img
            .addClass('landscape')
            .css({
                marginLeft: '-' + $img.width() / 2 + 'px',
            })
    } else {
        $img.addClass('portrait');
    }
});

http://jsfiddle.net/d3u9tc0g/

Thanks for pointing that out. I can't believed I overlooked the fact that I was using the cached value. — Carl Edwards, Oct 28 '14 at 15:45

score 1 · Answer 2 · answered Oct 28 '14 at 15:33

1

Instead of using the value saved in $imgWidth, you need to recalculate it after the class is added.

$img
            .addClass('landscape')
            .css({
                marginLeft: '-' + $img.width() / 2 + 'px',
            });

answered Oct 28 '14 at 15:33

Brian Glaz

15,468
4
37
55

Finding an Image's Width After Adding a CSS Class via Javascript

2 Answers2