javascript - How to get height of image manipulated with css - Stack Overflow

admin管理员组

文章数量:1415697

I'm having some div boxes where there is an image inside. What I want it to do, is to add a class to the image if the image height is smaller than the div boxs height its inside.

But I have set the image to be a 100% width of the div box with css, so when I use jquery's .Height() on the image, it gives me the original size. Any suggestions?

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

The literal with the ID imgProjekt1 and ImgProjekt2 makes a normal img tag from codebehind.

I'm having some div boxes where there is an image inside. What I want it to do, is to add a class to the image if the image height is smaller than the div boxs height its inside.

But I have set the image to be a 100% width of the div box with css, so when I use jquery's .Height() on the image, it gives me the original size. Any suggestions?

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

The literal with the ID imgProjekt1 and ImgProjekt2 makes a normal img tag from codebehind.

• javascript
• jquery
• html
• css
• image

Share Improve this question Follow edited Jul 14, 2014 at 18:22 Huangism 16.4k77 gold badges5050 silver badges7575 bronze badges asked Jul 14, 2014 at 18:21 user3661240user3661240 5311 silver badge99 bronze badges 4

• Have you tried using max-height and max-width? – RevanProdigalKnight Commented Jul 14, 2014 at 18:22
• 1 Have you tried $(img).outerHeight()? – David Barker Commented Jul 14, 2014 at 18:23
• max-height and max-with wont be helpfull in this situation – user3661240 Commented Jul 14, 2014 at 18:30
• with outerheight it puts the classes on all divs, also them where the image is bigger than the div or same size – user3661240 Commented Jul 14, 2014 at 18:31

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 2

try

var currentContentHeight = contentElement.offsetHeight;

You should use clientWidth & clientHeight.

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

Edit:

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

use window.getComputedStyle to get current DOM's object style value. Below is code example of how to extract height and width of dom object.

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";
   }
}

本文标签： javascriptHow to get height of image manipulated with cssStack Overflow