0

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.

Daniel
  • 2,355
  • 9
  • 23
  • 30
J Griff
  • 19
  • 5

1 Answers1

0

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">
Sparky
  • 287
  • 1
  • 11
  • Hi Sparky. I have coded in all the "full-width-img" html codes and the CSS code and the images are still not resizing when I adjust the resolution to a lower resolution. Any further suggestions? – J Griff Sep 05 '18 at 16:02
  • Your images all ahve their own dimensions. Please remove them and use css to format. Check my post, I edited – Sparky Sep 05 '18 at 17:38