find width of the image using JavaScript, while image added as background-image in css

Question

have to find the image natural width, heigth

but image added form css as a background-image

html, body {
    height: 100%;
    margin: 0;
}

.image {
    height: 50%;
    border: 1px solid orange;
    background-repeat: no-repeat;
    background-image: url('https://unsplash.it/200/300?image=0');
}

<div class="image"></div>

demo

Maybe (img=new Image()).src="sth";img.naturalWidth ...

Jonas Wilms
– Jonas Wilms

2017-07-01 12:56:23 +00:00
Commented Jul 1, 2017 at 12:56 — Jonas Wilms
– Jonas Wilms, Commented Jul 1, 2017 at 12:56
@Jonasw yeah trying that but not going as expected

bhv
– bhv

2017-07-01 12:58:55 +00:00
Commented Jul 1, 2017 at 12:58 — bhv
– bhv, Commented Jul 1, 2017 at 12:58

T.J. Crowder · Accepted Answer · 2017-07-01 13:04:42Z

1

See comments:

// Get the image
var img = document.querySelector(".image");
// Get its current style
var style = window.getComputedStyle ? getComputedStyle(img) : img.currentStyle;
// Extract the URL from it
var match = /url\("?([^")]+)"?\)/.exec(style.backgroundImage);
if (match) {
  // Create an `img`
  var x = document.createElement('img');
  // Watch for when it loads (it'll presumably come from cache)
  x.onload = function() {
    // Now we know its natural size
    console.log("width = " + x.width + ", height = " + x.height);
    console.log("naturalWidth = " + x.naturalWidth + ", naturalHeight = " + x.naturalHeight);
  };
  // Set the src (AFTER hooking 'load')
  x.src = match[1];
}

html, body {
    height: 100%;
    margin: 0;
}

.image {
    height: 50%;
    border: 1px solid orange;
    background-repeat: no-repeat;
    background-image: url('https://unsplash.it/200/300?image=0');
}

<div class="image"></div>

Details on the regex here. Basically, it extracts the path within the url(...) omitting "s.

Of course, if you don't have to get the URL from the element's background-image, all the better...

answered Jul 1, 2017 at 13:04

T.J. Crowder

1.1m201 gold badges2k silver badges2k bronze badges

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

2 Comments

bhv Over a year ago

match = /url$"?([^")]+)"?$/.exec(style.backgroundImage); is there an other way, i am getting an error like this .. demo

T.J. Crowder Over a year ago

@bhv: That fiddle doesn't use the working code above. My suggestion is...use the working code above instead. ;-) (The reason for the error is that you're not removing the quotes around the value.)

Top-Bot · Accepted Answer · 2017-07-01 13:11:58Z

0

You can get the attribute value using jQuery like this

var image_width = $(".image").width()); var image_height = $(".image").height());

I am posting this from my phone so forgive the in formatted code

answered Jul 1, 2017 at 13:11

Top-Bot

9021 gold badge7 silver badges22 bronze badges

Collectives™ on Stack Overflow

find width of the image using JavaScript, while image added as background-image in css

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related