0

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?

Community
  • 1
  • 1
ividyon
  • 656
  • 2
  • 6
  • 17
  • can you post all the relivent code, as it could be related to missuse of id's and class's. – Sam Denton Jul 01 '14 at 13:00
  • I've added as much as I sensibly could; the site structure is a bit complex and so it's probably easier to look at the code in the example links via browser dev tools. – ividyon Jul 01 '14 at 13:24

2 Answers2

2

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

Andrea Carraro
  • 9,731
  • 5
  • 33
  • 57
  • So that's the culprit! I used the table and table-cell strategy because, that way, the "main" content element would vertically stretch all the way down to the sidebar's height, even if there was not enough content inside. If I do not use a table, this effect is lost. Would you recommend any alternatives to replicate this behavior? I don't seem to be well-versed enough to pick one of those described patterns. – ividyon Jul 01 '14 at 13:48
  • I get your point. I've often met this problem and opted for letting the sidebar having a different height! Anyway, have a look to the [table-layout:fixed property](http://www.w3schools.com/cssref/pr_tab_table-layout.asp). This way You should be able to assign a percentage width to the sidebar and the main element. – Andrea Carraro Jul 01 '14 at 14:26
  • Wow! Simply adding `table-layout: fixed` to my `#tablewrap` element fixed everything! Thank you so much! I never expected the fix to be this easy! – ividyon Jul 01 '14 at 15:06
1

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;
}
Geniusknight
  • 629
  • 1
  • 7
  • 22
  • The issue does not seem to be with the smilies, but rather with the "postimage" class: `Image` It seems unlikely the issue is related to the "bbcode_sshot"-tagged images, as I've seen the issue appear in threads which do not make use of it. – ividyon Jul 01 '14 at 13:22
  • Ooops my bad I thought smilies as a image class to the added images. Looking back into it – Geniusknight Jul 01 '14 at 13:33
  • Thanks, but it doesn't seem like you understood the question. The `bbcode_sshot`-classed images are unrelated to the issue (I confirmed this by removing the **span** from the equation) - particularly because they force a max-width of 360px which is not a percentage and, therefore, unproblematic - instead, the problem lies with large images classed "postimage". Still, thank you very much for checking it out! – ividyon Jul 01 '14 at 13:49
  • Hope You got it fixing ! BTW if I had to use scaling or responsiveness for images then I would use something like this 'code' img{ width="500px" max-width="90%"}'code' try it to see if it works – Geniusknight Jul 01 '14 at 14:21