如何利用css获得图像的高度

Question

我有一些盒子里面有图像。我想让它做的是，如果图像高度小于其内部的div-boxs高度，则向图像添加一个类。

但是我已经用css将图像设置为div框的100%宽度，所以当我使用jquery时。在图像上，它给出了原始尺寸。有什么建议吗？

<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>

ID为imgProjekt1和ImgProjekt2的文本从codebehind生成一个普通的img标记。

Answer 1

使用窗口。getComputedStyle以获取当前DOM的对象样式值。下面是如何提取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";
   }
}

Answer 2

您应该使用clientWidth

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 3

尝试

var currentContentHeight = contentElement.offsetHeight;