jquery - 将元素的尺寸设置为等于响应图像尺寸

Question

我正在我的网站上制作可翻转的图片。我希望这些图像的“背面”与正面具有相同的尺寸。我的问题是我在图像上使用 Bootstrap img-responsive 类，因此“后”尺寸需要动态更新以匹配“前”。

这是我假设想要做的事情(我意识到 CSS 不可能像写的那样，只是说明我的目标)。我正在使用 ng-animate 来制作过渡动画并显示最初隐藏的“背面”并隐藏正面(我的状态很好)。

html:

<img class="front img-responsive" src="path/to/img.jpg" alt="">

<div class="back">Info about image</div>

CSS:

.back {
    height: [current height of .front]
    width: [current width of .front]
}

Answer 1

您可以使用 jQuery 获取图像的 height 和 width 并将其应用到您的 div

<img class="front img-responsive" id="img" src="path/to/img.jpg" alt="">
<div class="back" id="info">Info about image</div>


$(document).ready(function () {        
var img = document.getElementById('img');
var width = img.clientWidth;
var height = img.clientHeight;
$("#info").width(width).height(height);
});

DEMO