将元素的尺寸设置为等于响应图像尺寸答案

【问题标题】：Set dimensions of element to equal responsive image dimensions将元素的尺寸设置为等于响应图像尺寸
【发布时间】：2014-11-05 07:47:30
【问题描述】：

我正在我的网站上构建可翻转的图像。我希望这些图像的“背面”与正面具有相同的尺寸。我的问题是我在图像上使用了 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]
}

【问题讨论】：

你用 ng-style 试过了吗？
类似THIS?
@Narek，谢谢你提到这一点。我还没有真正使用过那个指令，但它看起来很有用！
@Syed，谢谢你完美的工作。我有一个 custom.js 文件，我将它与我的 Angular 控制器、工厂等分开，用于 jquery 格式。我就把这个扔进去！
@MattDionis：请在下面将我的答案标记为已接受的答案。

标签： jquery html css angularjs twitter-bootstrap-3

【解决方案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

【讨论】：

【解决方案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

【讨论】：