CODEWITHSUNDEEP
htmlcssfluid-layout
ividyon
ividyon

Reputation: 684

Large images stretching element despite max-width: 98%

In my semi-fluid forums layout, I'm experiencing a strange problem where images in posts sometimes stretch the page, but sometimes they don't.

I've set the images to "max-width: 98%", expecting this to scale them down to the width of the parent element. However, this only happens sometimes; for some reason, on other occasions the images explode the layout, and I cannot tell why.

From what I can see, both pages contain huge images, but only one of them stretches the layout, while the other scales correctly.

The elements are structured using this HTML code (example):

<div class="post">
    <div class="postbody">
        <div class="content">
            <img src="<source>" class="postimage" alt="Image">
        </div>
    </div>
</div>

while following the below CSS rules:

.post {
    padding: 0.5rem 0.5rem 0.5rem 1rem;
    margin-bottom: 1.6rem;
    position: relative;
}

.postbody {
    padding: 0px 0px 3rem;
    width: 83%;
    float: right;
}

.postbody .content {
    font-family: Verdana,Arial,Helvetica,sans-serif;
    overflow-x: auto;
}

.postbody img.postimage {
    width: auto;
    max-width: 98%;
}

A more precise view of the code can be seen at the above working examples.

I experience this issue on Firefox 30 and Internet Explorer 11 at 1920x1080, but not on Google Chrome. What's the deal? Maybe it has to do with my other issue?

Upvotes: 0

Views: 816

Answers (2)

Geniusknight
Geniusknight

Reputation: 629

Your non stretching images are acting that way because they are wrapped under different css tag with class postimage. However the stretched one's are wrapped inside different css class of bbcode_sshot. Here's what your two images look like: Stretched: 

<img class="postimage" src="/image file" alt=":)" title="image title" />

Unstretched

<span class="bbcode_sshot"><a href="http://i62.tinypic.com/2dtr90k.png" target="_blank"><img src="http://i62.tinypic.com/2dtr90k.png"/></a></span>

To fix stretching in non stretched images remove the bbcode_sshot class and add the postimage class or else add both as class for the overstretching images.

BTW if you wish to scale images then use this simple technique 

img {
    max-width: 100%;
    height: auto;
}

Upvotes: 1

Andrea Carraro
Andrea Carraro

Reputation: 10429

img max-width is expressed as a percentage of the parent's element width.

The matter is that the parent elements is not contained because #tablewrap and it's 2 children are implementing a display:table layout strategy.

In order to avoid this problem and maintain your layout responsive I'd suggest you to remove those display:table declarations and pick up -as an example- one of the patterns explained here

Upvotes: 2

Related Questions