CODEWITHSUNDEEP
htmlcssgoogle-chromesafarigrid-layout
Stacyalert
Stacyalert

Reputation: 85

Safari css height: auto; and height: 100%; stretches image. Does not happen in firefox or chrome

I have square images in a grid. The css says the width of each is 25%. The height should be set to auto. What you should get is a row of 4 straight across. What I get instead is width: 25%; height: max-image size

This fiddle might explain what I mean 

<div id="container">
    <img src="image.jpg">
    <img src="image.jpg">
    <img src="image.jpg">
    <img src="image.jpg">
</div>

#container img {width: 25%; height: auto;}

In firefox and chrome it looks fine. I can't figure out what the issue is in safari

Upvotes: 5

Views: 16662

Answers (1)

Chetan
Chetan

Reputation: 955

In the fiddle example I see that the for 'figure img' selectors min-height property is set to 100% which makes the image stretch its height to the whole block. Remove that and it would work.

Upvotes: 4

Related Questions