It is of course important to get all images the right size, but for those in the body of a web page a simple resize before using will usuallly be sufficient. There are also ways of specifying an image size using html or css code, but of course this is much less easy if the page has been set up using Evernote.

However, if you want to display an image in the header of your blog, and are comfortable with the coding required, then there is coding available to get this right.

Basically, you can set the image to expand or stretch to fill a container such as a 'DIV', or set the image to shrink to fit the size of the container.

The advice here was found on StackOverflow on this page.


* * * * *

You can use the CSS property background-size which is available since CSS 3:

background-size: 100% 100%;


If you want to preserve aspect ratio, there are two more possibilities.

  1. background-size: cover; - the background image is completely covering the element (image can be cut off)
  2. background-size: contain; - the image is streched without cutting it
Here is a demonstration on jsfiddle for all three possibilities. Click here for a DEMO

/link/resize-image-for-header-on-postach-io-blog