by Andrew Brett WatsonPublished in Design
How to make Header images and other images responsive on a web page.
Here is a quick tutorial to show you how to place a responsive image into your website in HTML. It was designed to be used in a module of a popular CMS like Joomla, Drupal or Wordpress so that the image is responsive and resizes according to the browser windows size, but should work on an web page you design.
It’s a simple line of code which will help you make an image resize with the browser so that it will fill the available space on any device (iPad, iPhone, tablet etc) or at any windows size.
The standard line of HTML you put in a web site to display an image with a link will look like this (and isn’t responsive):
<img src=“imagesfolder/image.jpg” width=“200” height=“150” alt=“Cool web Image”>
(the width and height aren’t required, but they tell the browser exactly which size to display the image which saves rendering time and allows you to display at a size different to the original).
To make this responsive you have to replace the width and height, with something that will resize:
<img style="max-width: 100%; height: auto;" src="/imagesfolder/image.jpg" alt="Cool web Image" />
The code “style="max-width: 100%; height: auto;”” is inline CSS to tell the browser to display the image in 100% of the space available and automatically find the correct height (keeping the same aspect ratio) for whichever width is available.
Note: This helps you especially with responsive templates because the parts/elements of such templates will change size but depending on the code, your image might not. With the code above, your image will resize with them. If you get unexpected results, remember that the inline CSS tells the browser to fill 100% of the available space but your template, the column width or the module size are the elements which define the “available space” for the image. If your image does not appear correctly, check the size of the element it is placed into. In any case the image should be responsive (check this by resizing the browser).
This should work for the following CMS systems as long as they allow you to insert custom HTML code:
AdaptCMS, b2evolution, BEdita, Chevereto, CMS Made Simple, CMSimple, concrete5, Contao, Cotonti, Directus, Dokuwiki, Dotclear, Drupal, DynPG, Exponent CMS, eZ Publish, Geeklog, GetSimple CMS, Habari, ImpressCMS, ImpressPages, Jamroom, Joomla!, Kajona, Magento, Mambo, MediaWiki, MiaCMS, Midgard CMS, MODX, Moodle, Novius OS, Nucleus CMS, Ocportal, Opencart, Papaya CMS, Phire CMS, PHP-Fusion, PHP-Nuke, phpWebLog, phpWebSite, phpWiki, Pico, pimcore, PivotX, Pixie (CMS), PmWiki, Prestashop, ProcessWire, RavenNuke, SMW+, Serendipity, SilverStripe, SPIP, TangoCMS, extpattern, Tiki Wiki CMS Groupware, Tribiq CMS, TYPO3, Wolf CMS, WordPress, Xaraya, XOOPS, Zikula.