1

I am loading images of various sizes and dimensions into my website. Chrome, Opera and Safari all stretch the image so, that it doesn't look unnaturally stretched or skewed. Firefox keeps the width of the original image and sets the image height to 100px. This results in 50x100, 150x100 and 2000x100 images. enter image description here On the left side you see Chrome, on the right one you see Firefox. I want all images to be exactly 100px high.

The image class looks like this

 img.image-message {
        padding-bottom: 2px;
        height: auto;
        width: auto;
        max-height: 100px;
        max-width: 100%;
    }

Setting only height and width doesn't change a thing:

 img.image-message {
        padding-bottom: 2px;
        height: 100px;
        width: auto;
    }

View live example at metahill.com. You can use this user to login:

Username: test_t
Password: meta_hill_t
poitroae
  • 21,129
  • 10
  • 63
  • 81
  • Remove max-height: 100px? – 0x1F602 Jul 30 '13 at 17:07
  • 1
    If you want to keep the aspect ratio, you can set width to auto like this http://stackoverflow.com/questions/757782/how-to-preserve-aspect-ratio-when-scaling-image-using-one-css-dimension-in-ie6 – wendelbsilva Jul 30 '13 at 17:08
  • @beta0x64 I want all images be 100px high. See the correct screenshot of chrome. – poitroae Jul 30 '13 at 17:08
  • @wendelbsilva The width _is_ set to `auto`. – poitroae Jul 30 '13 at 17:14
  • You have 2 options, sent max-width to auto or always scale image to 100px. To scale to 100px you need to remove max-height and max-width and set height to 100px and width to auto. The resizing to 100px is only bad if someone post an image smaller than 100px. In that case, the image quality will not be good. – wendelbsilva Jul 30 '13 at 17:18
  • @wendelbsilva Have you actually tried that? It doesn't work that way over here. – poitroae Jul 30 '13 at 17:21
  • @poitroae maybe Im getting the question wrong. [http://jsfiddle.net/TC2re/](http://jsfiddle.net/TC2re/) – wendelbsilva Jul 30 '13 at 17:24
  • @wendelbsilva I see it seems to work there. Do you have any idea why it does not work on http://www.metahill.com? – poitroae Jul 30 '13 at 17:28

2 Answers2

3

Hm, I think I've identified the root of your problem in the CSS. It actually isn't directly a style of the <img> element, which is what made it so hard to pin down. It lies in this definition in chat.css:

#chat .chat-entry > .chat-entry-message {
    display:-webkit-box;
    display:-moz-box;
    display:-o-box;
    display:box;
    padding: 3px;
    word-wrap: break-word;
}

The problem you see in Firefox relates to the display: -moz-box, which, as explained by Mozilla, causes children (such as the <img> elements you're having trouble with) of the styled element to grow to fill their parent. Changing the definition to something like:

#chat .chat-entry > .chat-entry-message {
    display: block;
    padding: 3px;
    word-wrap: break-word;
}

will fix the observed problem, though I'm not sure if all those variants of display: box were there for some other purpose. (So I can't say if this fix will affect anything else.) Anyways, hope this is what you were looking for! If not, let me know and I'll be happy to try helping further!

Serlite
  • 12,130
  • 5
  • 38
  • 49
1

Set the height to 100px, not the max height. The width will follow automatically to the height unless specifically declared.

Brett Weber
  • 1,839
  • 18
  • 22
  • Have you actually tried it in e.g. Firebug? Leaving it at only `img.image-message { height:100px;padding-bottom: 2px;}` doesn't do the trick. – poitroae Jul 30 '13 at 17:11
  • I have similar code in a project I am working on, I'll double check and update if the answer is different, but I believe that is all I am having to do – Brett Weber Jul 30 '13 at 17:14
  • I don't understand the difference between your code and mine, but the solution I provided works for my situation. – Brett Weber Jul 30 '13 at 19:07
  • I have another situation where I do not set any static height or widths and only place max values. I do not have min values declared, and that situation works as well – Brett Weber Jul 30 '13 at 19:08