KnowledgeHub
Questions
Tags
Users
Search
Alex Rivera
|
Logout
Edit Question
Title
Body
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?
Tags (comma-separated)
Save Edits
Cancel