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

Question

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

下图：

＆＃13;

＆＃13;

#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);
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 1

问题在于您指定了两次位置，一次是position: absolute，它应该是什么，一次是position: relative，这不是您想要的。 有关postion: absolute和position:relative检查this和this之间的更多信息和区别。

＆＃13;

＆＃13;

#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);
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 2

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

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

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

以下是代码：

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;