將元素的尺寸設置爲等於響應圖像尺寸

我在我的網站上構建了可翻轉圖像。我希望這些圖像的「背面」具有與前面相同的尺寸。我的問題是，我在我的圖像上使用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

將元素的尺寸設置爲等於響應圖像尺寸

回答

相關問題