Responsive images

Question

I am using Magento 1.9 with the rwd theme.

I added an 890px wide image on my home page. How can I have this resize responsively based on the view port?

Answer 1

When you are adding the image to your CMS block/banner, don't specify a width of the image on the image tag itself.

Good: <img src="{{media url=wysiwyg/banner_image.jpg}}">

Bad: <img src="{{media url=wysiwyg/banner_image.jpg}}" width="890" height="200">

If you're using the sample data CMS block to pattern the content of your banner, that should work. If that doesn't work, then you will need to apply the following CSS properties to the above image:

.some-class-that-selects-the-banner-image-parent img {
    width: 100%;
    max-width: 100%;
}

Answer 2

take a look here, its more about using higher res images, but these guys wrote the new 1.9 rwd theme http://www.classyllama.com/blog/implementing-high-res-images-magentos-native-responsive-theme

Answer 3

this is a better solution:

<img class="img-responsive" src="{{media url=wysiwyg/banner_image.jpg}}">

.img-responsive {
    display: block;
    height: auto;
    max-width: 100%;
}