Book Image

Learning Magento Theme Development

By : Richard Carter
Book Image

Learning Magento Theme Development

By: Richard Carter

Overview of this book

Table of Contents (15 chapters)
Learning Magento Theme Development
Credits
About the Author
About the Reviewers
www.PacktPub.com
Preface
Index

Making images responsive for your Magento theme


Images are very important on your Magento store to ensure that your customers can see what they're buying. If you look at a product page on your Magento store at the moment, you'll see that the product image hugely overflows the column's width available to it, as you can see from the highlighted portion of the following screenshot:

The easiest way to ensure that your store's images will be resized to sensible dimensions is to set the max-width attribute of the img element to 100% to ensure no image becomes larger than its container.

Open your theme's styles.css file in the /skin/frontend/default/m18/css/ directory and add the following CSS to it to help ensure images are resized to the width they have available in the page's layout, their height-to-width ratio is retained, and images are not stretched out of proportion:

img,
img[height],
img[style],
img[width],
img#image {
height: auto !important;
max-width: 100% !important;
width: auto !important...