2

HTML:

<div class="logo-container">
    <span>some text</span>
</div>

CSS:

.logo-container {
    display: block;
    background: url(img/logo.png) no-repeat center;
    background-size: contain;
    width:100%;
    height:20%;
}

How can I get the current dimension on which the background-image was scaled to?

I'm assuming that the background image dimension differs from the dimension of the .logo-container.

Raisen
  • 4,385
  • 2
  • 25
  • 40

2 Answers2

6

Fiddle: http://jsfiddle.net/umXk3/

Since you already know that the image is 780x150 in its unscaled format, you can deduce its current dimensions from the dimensions of .logo-container:

var width = $('.logo-container').width();
var height = $('.logo-container').height();

// Calculate dimensions depending on if width is greater than height:
var imgWidth = width > height ? 780/150 * height : width;
var imgHeight = height > width ? 150/780 * width : height;
Nicklas Nygren
  • 2,595
  • 13
  • 19
0

Try like

var wdth = $('.logo-container img').width();
var hght = $('.logo-container img').height();

Or you can get the div height and width also like

var wdth = $('.logo-container').width();

Because the image is the background image of that div.

GautamD31
  • 28,552
  • 10
  • 64
  • 85
  • But the background image's aspect ratio is respected when background-size is equal to contain, so the dimension for the background image should be equal or less than its container. I tried your code but $('.logo-container img') returns null and $('.logo-container').width() returns the container width which is different from the background image. – Raisen Aug 10 '13 at 09:37