CODEWITHSUNDEEP
cssimagehtml
user1835582
user1835582

Reputation: 142

Aspect ratio of html element (inside img tag)

Why is this happening? And how to fix? In my opinion, IE and Opera works fine in all cases, but not so good in other browsers for "height".

HTML:

<div class="image">
    <img class="data" src="http://www.jpeg.org//images/blue_large_05.jpg" alt=""/>
</div>

CSS (height):

.image {
    overflow: hidden;        
    width: -moz-max-content;
    width: intrinsic;
    display: inline-block;

    height: 100px; //Is buggy
}

.data {
    width: 100%;
    height: 100%;
    float: left;
}

CSS (width):

.image {
    overflow: hidden;        
    width: -moz-max-content;
    width: intrinsic;
    display: inline-block;

    width: 200px;
}

.data {
    width: 100%;
    height: 100%;
    float: left;
}

Property values intrinsic && -moz-max-content for correct width in display:block.

Upvotes: 1

Views: 813

Answers (2)

marinbgd
marinbgd

Reputation: 759

You should put height: auto; for the image. Then the browsers will calculate correct height and image will be in the correct ratio.

Upvotes: 1

Chris Herbert
Chris Herbert

Reputation: 6305

I don't see anything unexpected about what it's doing. When you set .img height to 100%, it makes it 100% of the parent element's height. In this case that's going to distort the image.

Upvotes: 1

Related Questions