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

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

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

2 个答案: