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
8
  • Remove max-height: 100px?
    – 0x1F602
    Commented Jul 30, 2013 at 17:07
  • 1
    If you want to keep the aspect ratio, you can set width to auto like this stackoverflow.com/questions/757782/… Commented Jul 30, 2013 at 17:08
  • @beta0x64 I want all images be 100px high. See the correct screenshot of chrome.
    – poitroae
    Commented Jul 30, 2013 at 17:08
  • @wendelbsilva The width is set to auto.
    – poitroae
    Commented Jul 30, 2013 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. Commented Jul 30, 2013 at 17:18

2 Answers 2

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!

1

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

4
  • 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
    Commented Jul 30, 2013 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 Commented Jul 30, 2013 at 17:14
  • I don't understand the difference between your code and mine, but the solution I provided works for my situation. Commented Jul 30, 2013 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 Commented Jul 30, 2013 at 19:08

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.