My Image is not taking up full width of page

Question

For some reason my image is not taking up the entire width of page. I commented out my entire site.css file besides the #ResterauntImage code.

Picture Below :

#ResterauntImage {
    position: absolute;
    left: 0;
    top: 0;
  
    height: 400px;
    width: 100%;
    background-size: cover;
    padding: 0px;

    background-image: url("");
    overflow: hidden;
    /*-webkit-filter: grayscale(100%);*/
    /*-webkit-filter: sepia(100%);*/
    -webkit-filter: blur(2px);
}

  
  
  <img id="ResterauntImage"class="img-fluid" alt="Responsive image" src="http://www.gatesgardencentre.co.uk/wp-content/uploads/gn043-MED-WIDE.jpg" />

Answer 1

I removed height of the image and it's working perfectly. The image now has 100% width. If you specify a width:100% there is no need to specify a height of an image as the browser will calculate it based on the ratio of the image (the default value for height is auto).

I removed some other tags like background-image, background size, padding and position:relative as you already have position:absolute in your code. I left only required code to make your image with 100% width.

I hope this solves the problem. I checked and in working on my page.

Here is the code:

#ResterauntImage {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
}

<img id="ResterauntImage"class="img-fluid" alt="Responsive image" src="http://www.gatesgardencentre.co.uk/wp-content/uploads/gn043-MED-WIDE.jpg" />