Scaling images proportional to the window size

Hey guys and gals,

I have been playing around with my new WordPress page for a few days now and all is working well, more or less. Been learning a lot.

One issue I have encountered though is that my theme (Draco) doesn’t scale pictures i add on a Page accordingly to the size of the window. This ends with the formatting on my 24″ screen looking fine, on my 17″ notebook its also more or less alright, if it gets smaller (e.g. mobile device) the picture stays the original size, giving the text next to it only one letter of space per line, which makes any kind of text unreadable, unfortunately.

After doing some research I bumped over a CSS line (max-width:100% height:auto) which is supposed to help. I tested around with it and just now also found it in the stylesheet.css of Draco.
This is how it’s written in there:

/* div */

div, img, pre, figure {
max-width: 100% !important;
overflow: hidden;
}

html, body {
max-width: 100% !important;
}

/* Images */

img {
height: auto;
max-width: 100% !important;
}

Unfortunately this either doesn’t regard the in-site pictures or it doesn’t work properly.

Any tip on how i can resolve this issue? Have I overlooked something essential?
Guess this is an easy one for all you pros ??

Thanks in advance!!
regards