CODEWITHSUNDEEP
htmlcssfirefoxlayout
Tamik Soziev
Tamik Soziev

Reputation: 14798

Why is this max-height for image working in every browser except Firefox?

Check out this fiddle: http://jsfiddle.net/2fhbjszn/4/

It works fine in chrome and safari, only firefox is calculating the height wrong causing slides to not fit container.

I am trying to create a set of floated left slides inside an absolute positioned container, however it looks like firefox stretches slide's height outside of the container height like if there was no max-height: 100% directive given.

This is my html:

<div class="wrapper">
    <div class="absolute-container">
        <div class="slides">
            <div class="slide">
                <img src="https://unsplash.com/photos/WLUHO9A_xik/download"/>
            </div>
            <div class="slide">
                <img src="https://unsplash.com/photos/pYxh7-ITaq8/download"/>
            </div>
        </div>
    </div>
</div>

This is my CSS:

.wrapper {
    width: 900px; 
    height: 250px; 
    background-color:#aaa; 
    position:relative;    

    .absolute-container {
        position: absolute; 
        top: 30px; 
        bottom: 30px; 
        background-color: #DBD9C7; 
        width: 100%;
        height: 100%;
    }
}
.slides {
    height: 100%;
    &:after {
        content: "";
        display: table;
        clear: both;
    }
}

.slide {
    float:left; 
    height: 100%;
    margin-right: 5px;
    img {
        max-height: 100%; 
        max-width: 100%; 
        width: auto; 
        display:block;
    }
}

Upvotes: 2

Views: 121

Answers (2)

GooKing
GooKing

Reputation: 1

I've had issues with display:table and min/max heights. Try setting it to display:block and see if that sorts it. Then fix the other issues caused by that change!

Upvotes: 0

RobertT
RobertT

Reputation: 4560

Looks like a bug in Firefox trying to calculate <div class="slide"> width, as currently it is computed as width of original picture before rescaling. Said that, fast workaround would be to set max-height: on image in pixels rather than relatively.

Upvotes: 1

Related Questions