I want to search

MENU

CSS Styles for Images

Centered Image with padding

<img src="/path/to/image" class="centered" alt="name">

adding the 'class="centered"' auto sizes via css.
You will also notice that there are no additional <img> values such as height, width, align, vspace, etc.
The style is controlled via the CSS selector class="centered"


Example <img src="/sites/all/modules/styleguide/assets/image-horizontal.jpg" class="centered" alt="Italy">

will result in the image below.

Image aligned left with padding



<img src="/path/to/image" class="float-left">

adding the 'class="float-left"' auto sizes via css.
You will also notice that there are no additional <img> values such as height, width, align, vspace, etc.
The style is controlled via the CSS selector class="float-left"


Example <img src="/sites/all/modules/styleguide/assets/image-horizontal.jpg" class="float-left">

will result in the image below.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam iaculis, velit gravida convallis tincidunt, felis enim venenatis lorem, nec lobortis nisl urna et mi. Pellentesque ac dictum ante. Fusce dignissim tempor elementum. Ut dignissim convallis eros, viverra luctus lacus consequat ac. Sed feugiat velit sed magna aliquam accumsan. Nam vitae porta tortor. Nam auctor dui a neque iaculis in aliquam erat viverra. Duis orci nunc, lacinia in malesuada et, euismod id turpis. Cras mattis vulputate erat, eget tempor magna egestas eu. Vestibulum sit amet massa est.

Image aligned right with padding



<img src="/path/to/image" class="float-right">

adding the 'class="float-left"' auto sizes via css.
You will also notice that there are no additional <img> values such as height, width, align, vspace, etc.
The style is controlled via the CSS selector class="float-right"


Example <img src="/sites/all/modules/styleguide/assets/image-horizontal.jpg" class="float-right">

will result in the image below.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam iaculis, velit gravida convallis tincidunt, felis enim venenatis lorem, nec lobortis nisl urna et mi. Pellentesque ac dictum ante. Fusce dignissim tempor elementum. Ut dignissim convallis eros, viverra luctus lacus consequat ac. Sed feugiat velit sed magna aliquam accumsan. Nam vitae porta tortor. Nam auctor dui a neque iaculis in aliquam erat viverra. Duis orci nunc, lacinia in malesuada et, euismod id turpis. Cras mattis vulputate erat, eget tempor magna egestas eu. Vestibulum sit amet massa est.