How do I code my website so that my 100% width images adjust size according to screen resolution changing?

Question

How do I code my website so that my 100% width images adjust size according to different screen resolutions? For e.g. 1280 x 720.

Here is the link to my home page with the images that need resizing according to screen resolution. Look at Lines 119 to 123 for image codes.

Answer 1

You have put a height of 700px+ on your images using the img in css. Add another class in css saying:

.full-width-img{
    width:100%;
    height:auto;
    display:block;
    }

Add class="full-width-img" to your images you want to have 100% width.

EDIT Remove the width qnd height from your img tags. BEcause right now they are:

<img src="images3/motoxmaxres.jpg" class="full-width-img" width="100%" height="" alt="motocross landing">

While it should be

<img src="images3/motoxmaxres.jpg" class="full-width-img" alt="motocross landing">