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

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

来源

2014-09-11 MattDionis

你NG风格尝试过吗？ – 2014-09-11 11:23:10

类似[THIS]（http://jsfiddle.net/1mdwqt3o/）？ – 2014-09-11 11:39:54

@Narek，谢谢你提到这个。我还没有真的使用过这个指令，但它看起来很有用！ – MattDionis 2014-09-11 12:20:25

你可以得到height和使用图像的width jQuery和它应用到您的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

来源

2014-09-11 14:27:51

我不知道这是你将如何使用它，但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

来源

2014-09-11 12:51:10

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

回答

相关问题