将元素的尺寸设置为相等的响应图像尺寸

Question

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

这是我假设要执行的操作（我意识到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

Answer 2

我不知道这是您将如何使用它，但是v1.3 +添加了支持，并且刚刚找到了它。

参见plunkr = http://plnkr.co/edit/utsD4RimPB6RSKXnAlLi?p=preview

<!DOCTYPE html>  
 <html ng-app>  
  <head>  
   <link rel="stylesheet" href="style.css">  
   <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.0-rc.0/angular.js"></script>  
   <style>  
    .mydiv {  
     height: {{height}}px;  
     width: {{width}}px;  
     background-color: red;  
    }  
   </style>  
  </head>  
  <body style="width:100%;height:100%;">  
   <div class="mydiv" ng-init="height= 100; width=200"></div>  
   h: {{height}} w: {{width}}  
  </body>  
 </html>  

重复： http : //noypi-linux.blogspot.com/2014/09/angularjs-binding-inside-of-style-tag.html