요소의 치수를 응답 이미지 치수와 동일하게 설정하십시오.

내 사이트에 이미지가 있습니다. 이 이미지의 "뒷면"이 정면과 동일한 치수를 가지기를 바랍니다. 내 문제는 내 이미지에 부트 스트랩 img-responsive 클래스를 사용하고 있으므로 "뒤"치수가 "앞"과 일치하도록 동적으로 업데이트해야합니다.요소의 치수를 응답 이미지 치수와 동일하게 설정하십시오.

내가 가정 한 바가있다. (나는 CSS가 쓰여진 것처럼 가능하지 않다는 것을 알고있다. 애니메이션을 사용하여 전환을 애니메이션하고 처음에는 숨겨진 "뒷면"을 드러내고 앞면을 숨 깁니다 (그 모습은 좋은 모양입니다).

HTML :

CSS

<img class="front img-responsive" src="path/to/img.jpg" alt=""> 

<div class="back">Info about image</div>

.back { 
    height: [current height of .front] 
    width: [current width of .front] 
}

출처

2014-09-11 MattDionis

은에 적용? –

[THIS] (http://jsfiddle.net/1mdwqt3o/)와 같은 것입니까? –

@ Narek, 언급 해 주셔서 감사합니다. 나는 실제로 그 지시어를 사용하지 않았지만 유용하게 보입니다! – MattDionis

당신은 height 및 이미지의 width 사용하여 jQuery를 얻을 수 있습니다 당신은 NG 스타일로 시도하여 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

하고, 이것은 당신이 그것을 사용하는 방법 인 경우 나도 몰라,하지만 1.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

요소의 치수를 응답 이미지 치수와 동일하게 설정하십시오.

답변

관련 문제