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? — Refilon
– Refilon, Commented Oct 28, 2014 at 15:33
Are you using multiple <img> elements per page that you want this script to run on? If so, you'll need an each function. — Bram Vanroy
– Bram Vanroy, Commented Oct 28, 2014 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
– Carl Edwards, Commented Oct 28, 2014 at 15:43

Hless · Accepted Answer · 2014-10-28 15:34:07Z

2

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/

answered Oct 28, 2014 at 15:34

Hless

3,33623 silver badges22 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Carl Edwards Over a year ago

Thanks for pointing that out. I can't believed I overlooked the fact that I was using the cached value.

Brian Glaz · Accepted Answer · 2014-10-28 15:33:42Z

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, 2014 at 15:33

Brian Glaz

15.7k4 gold badges40 silver badges55 bronze badges

Collectives™ on Stack Overflow

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

2 Answers 2

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related