Have questions? Call now!(ID:86693)+1-855-211-0932

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:

https://www.w3schools.com/css/css_rwd_images.asp.

 

Here's to your success,

 

James R. Henry,

Owner,

Loyalty Hosting, a HenryTek company!

Comments

comments



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>