CSS로 조작 된 이미지의 높이를 얻는 방법

Question

내부에 이미지가있는 div 상자가 있습니다. 내가 원하는 것은 이미지 높이가 div 상자 높이보다 작 으면 이미지에 클래스를 추가하는 것입니다.

하지만 CSS로 div 상자의 너비가 100 %가되도록 이미지를 설정 했으므로 이미지에서 jquery의 .Height()를 사용하면 원래 크기가됩니다. 어떤 제안? 아이디 imgProjekt1과 함께 ImgProjekt2

<div class="boxe"> 
    <asp:Literal ID="imgProjekt1" runat="server" /> 
    <asp:Literal ID="litProjekt1" runat="server"/> 
</div> 

<div class="boxe forsideboxMiddle"> 
    <asp:Literal ID="imgProjekt2" runat="server" /> 
    <asp:Literal ID="litProjekt2" runat="server"/> 
</div> 

리터럴은 숨김에서 통상 img 태그한다.

Answer 1

clientWidth & clientHeight를 사용해야합니다.

var img = document.getElementById('imgProjekt1'); 
var width = img.clientWidth; 
var height = img.clientHeight; 

편집 :

$(window).load(function() { 
    var image = $('.boxe img'); 
    var box = $(".boxe"); 
    if (image[0].clientHeight > box[0].clientHeight) { 
     image.addClass('billedMiddle'); 
    } 
}); 

Answer 2

는 현재 DOM의 객체 스타일 값을 얻을 수

var currentContentHeight = contentElement.offsetHeight; 

Answer 3

사용 window.getComputedStyle을 시도합니다. 다음은 dom 객체의 높이와 너비를 추출하는 코드 예제입니다.

function Scale(width_offset, height_offset) { 
    var imgs = document.getElementsByClassName("your img tag class name"); 
    for (var i = 0; i < imgs.length; i++) { 
    var curr_width = parseInt(window.getComputedStyle(imgs[i]).width); // extract dom's width 
    var curr_height = parseInt(window.getComputedStyle(imgs[i]).height); //extract dom's height 
    imgs[i].style.width = curr_width + width_offset + "px"; 
    imgs[i].style.height = curr_height + height_offset + "px"; 
    } 
}