CALL NOW!(ID:86693)
HomeUncategorizedThe Simplest Way To Add A Responsive Image

The Simplest Way To Add A Responsive Image

By now,many of us are aware that responsive simply means it will be shown on every device in a clean way. That is to say the image will appear actually on the screen rather than partly on & partly off the screen.


Most images at Loyalty Hosting will appear across every device nicely, and we'll show you how this is done below.


There are a couple ways to pull this off, one by using CSS and the other simple HTML.


The easiest way is to simply use the HTML:

<a href="MY WEBSITE LINK" target="_blank"><img src="IMAGE LINK" style='width:100%;' border="0" alt="IMAGE INFO HERE"></a>


The alternate way is through CSS, which means you'll have to add a piece of code to the CSS file that your website uses, sometimes main.css or css.css.


The following CSS code will cause the image to have a maximum width either of the screen, or the table, of 100%.

img {

max-width: 100%;

height: auto;



While there are so many different variations of images & making them responsive,the above two are the easiest & most basic. I highly recommend you visit the following site to learn more of the different variations, as well as learn HTML, PHP, & other internet languages:


Here's to your success,


James R. Henry,


Loyalty Hosting, a HenryTek company!



Post a Comment

Your email is never published nor shared. Required fields are marked *


You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>