时间戳

首页 > 解决方案 > 我的图像没有占据页面的整个宽度

html - 我的图像没有占据页面的整个宽度

问题描述

出于某种原因，我的图像没有占据页面的整个宽度。除了#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" />

标签： htmlcss

解决方案

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

我删除了一些其他标签，如,background-image和你在代码中已有的标签。我只留下了使您的图像具有 100% 宽度的所需代码。background sizepaddingposition:relativeposition:absolute

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

这是代码：

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

推荐阅读