Responsive Images with CSS
===

I'm finding it tricky to resize images to make them responsive.

I'm developing a php application to automatically convert a website to a responsive version. I'm a little stuck on the images.

I've successfully added a wrapper class to every image on a website and can re-size the images quite well.

My issue lies with images that are naturally smaller than the the window, such as logos and icons. I don't want to resize these.

My code currently converts:

    <img src="[src]" />

into:

    <div class="erb-image-wrapper">
        <img src="[src]" />
    </div>

Where I use the following CSS:

    .erb-image-wrapper{
        max-width:90%;
        height:auto;
        position: relative;
        display:block;
        margin:0 auto;
    }
    .erb-image-wrapper img{
        width:100% !important;
        height:100% !important;
        display:block;
    }

This resizes all images, but I only want it to resize images that are over the width of the page. Is the a way I can achieve this via CSS?