1

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?

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%;
}
  • Thanks Erik. I guess I'm not up to speed with the whole "responsive" concept. I think this question applies to any situation where you want to have an image resize itself to the viewport? – shnozolla Jun 3 '14 at 14:03
1

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

1

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%;
}

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.