我的图片没有占据整页宽度

Question

出于某种原因，我的图像没有占据整个页面宽度。除了#ResterauntImage代码之外，我注释掉了我的整个site.css文件。

图片如下：

#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

我删除了图像的高度，它工作得很好。图像现在有100％的宽度。如果指定width:100%，则无需指定图像的高度，因为浏览器将根据图像的比例计算它（高度的默认值为auto）。

我删除了一些其他标签，如background-image，background size，padding和position:relative，因为你已经在代码中使用了position:absolute。我只留下了所需的代码，使您的图像宽度为100％。

我希望这能解决问题。我检查并在我的页面上工作。

这是代码：

#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" />

Answer 2

问题是你指定位置两次，一次是position: absolute，那就是它应该是什么，一次是position: relative，这不是你想要的。有关postion: absolute和position:relative的更多信息和区别，请查看this和this。

#ResterauntImage {
    position: absolute;
   left: 0;
    top: 0;
    /* this is false! position: relative;*/
    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" />