Menu
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?
896
Making an image fluid, or responsive, is actually pretty simple. When you upload an image to your website, it has a default width and height. You can change them both with CSS. To make an image responsive, you need to give a new value to its width property. Then the height of the image will adjust itself automatically.
Use the CSS property max-width to create boundaries for a fluid page. By setting a percentage width and a fixed pixel max-width , the content wrapper will always be relative to the screen size, until it reaches the maximum size, 800px in this example, to keep the content wrapper from extending beyond that.
Responsive images are the set of techniques used to load the right image based on device resolution, orientation, screen size, network connection, and page layout. The browser should not stretch the image to fit the page layout, and loading it shouldn't result in time & bandwidth wastage.
For the CSS we're going to apply the width at 100% to get the image to become flexible within the container itself. Remember that if an image is set to width: 100% on a container that occupies 70% of the viewport, then the image will occupy 70% of the viewport (but 100% of the container).
.erb-image-wrapper img{ max-width:100% !important; height:auto; display:block; } Worked for me.
Thanks for MrMisterMan for his assistance.
52
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With