Dan Hanly Dan Hanly - 4 months ago 19
CSS Question

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?

Answer
.erb-image-wrapper img{
    max-width:100% !important;
    height:auto;
    display:block;
}

Worked for me.
Thanks for MrMisterMan for his assistance.

Comments