Responsive Images with CSS

Make an image responsive - the simplest way

You can try doing

<p>
<a href="MY WEBSITE LINK" target="_blank">
<img src="IMAGE LINK" style='width:100%;' border="0" alt="Null">
</a>
</p>

This should scale your image if in a fluid layout.

For responsive (meaning your layout reacts to the size of the window) you can add a class to the image and use @media queries in CSS to change the width of the image.

Note that changing the height of the image will mess with the ratio.

Responsive Images with CSS

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

Worked for me.

Thanks for MrMisterMan for his assistance.

Responsive Image in HTML and CSS

As mentioned in Julian B's post, the picture element is made to do this sort of thing.

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/picture
https://www.html5rocks.com/en/tutorials/responsive/picture-element/

It lets the browser check the media query and choose the best image file to display. Here's how it might look in your HTML:

<div id="header">    
<picture>
<source media="(min-width: 480px) srcset="images/H550xW1250.png">
<img src="images/H683xW480.png" alt="header image">
</picture>
</div>

The code above displays the smaller image by default, but the larger image when the browser width is larger than 480px. You can add more src elements if you have more image sizes to toggle.

Note that I'm using a min-width query rather than max-width. This means browsers that don't understand the picture element will display the small image by default.

You can see in the support table for picture that it's supported by most modern browsers. If you need to fully support older IE, there are polyfills available.

Responsive for image problems in CSS coding

you should try this code. if i understood right, this is what you are trying to do.

make image height:100% ( cover whole height of container ) ; width:auto to preserve aspect ratio of image and center the image.

see snippet or jsFiddle