jquery - 当背景大小设置为包含时，如何获取背景图像的尺寸？

Question

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%;
}

如何获得背景图像缩放到的当前尺寸？

我假设背景图像尺寸不同于.logo-container.

Answer 1

小提琴：http: //jsfiddle.net/umXk3/

由于您已经知道图像是未780x150缩放的格式，您可以从 的尺寸推断其当前尺寸.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;

Answer 2

试试喜欢

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

或者你也可以得到 div 的高度和宽度

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

因为图像是那个 div 的背景图像。