CODEWITHSUNDEEP
androidhtmlcss
UzumakiDev
UzumakiDev

Reputation: 1276

Max-height not working as expected on Android stock browser

On Android 4.0.4, stock browser, I'm having trouble setting an image's maximum height. At the moment it renders outside of its container.

HTML

<div class="dualBlock">
    <div class="dualImage col-postImage">
        <img src="http://placekitten.com/300/600" />
    </div>
</div>

CSS

.dualBlock {
    width:80%;
    margin:50px auto;
}
div.dualImage {
    max-height:300px;
    width:100%;
    position:relative;
    text-align:center;
    background-color:red;
}
div.dualImage img {
    max-width:100%;
    max-height:100%;
}

Fiddle http://jsfiddle.net/SEOplay/QkEtq/1/

This works fine in chrome and renders as expected, the problem only occurs on Android stock browser.

If I define a height for .dualImage, say 300px it works. Why does Android only accept a defined height and how can I get this to work on its stock browser?

Upvotes: 1

Views: 1407

Answers (1)

RealDeepak
RealDeepak

Reputation: 863

Do this:

div.dualImage img {
    max-height: 300px;
    max-width: 100%;
}

Upvotes: 7

Related Questions