Question

I put an image into the following wordpress site:

http://sofrahomemadefood.com/menu/

The image is big. Therefore, it runs over its container. It gets covered up by the next region as the following image shows:

I would like to learn the reason of this and how to prevent the image being covered up?

Answer 1

The reason is this chunk of html:

<img class="alignnone" title="Menu" src="http://i.imgur.com/OKRf1h.jpg" alt="" width="1024" height="663">

(that’s the embedded image, notice the width and height attributes)

You can fix it with:

img.alignnone{
    width: auto; /*You may want to flag this !important for some browsers*/
    height: auto; /*You may want to flag this !important for some browsers*/
    max-width: 100%;
    max-height: 100%;
}

What this does:

• The image’s nautral aspect ratio is preserved by the use of width:auto and height:auto
• The image is prevented from breaking out of the bounds of it’s parent element by max-height:100% and max-width:100%

On a side note:

For people who always want the image to scale to the width/height of the parent, preserving aspect ratio: You can use min-width:100% (for width) or min-height:100% for height, with width:auto and height:auto to preserve the ratio.

If you would rather keep the image at size and let it flow out of the content area, you can remove overflow:hidden from the div.maincontent selector on line 202 of style.css.