html - CSS:完整的左右出血图像

Question

在我的主页上，我试图让三个图像跨越浏览器窗口的整个宽度。在这里查看我的网站:http://accelfoods.com .我希望页面上的最后 3 张图片(关于 AccelFoods、行业参与、投资组合公司)与导航正下方的图片宽度相同。

我已经弄清楚如何控制#page-body 并使图像到达左侧边缘(像这样:http://imgur.com/gfXPyPK)。但是我不知道如何让右边的空白消失。

在我弄清楚之前，我已经对这个 CSS 进行了注释，但这是我用来处理图像的内容:

#page-body {

margin-left: 0px;

padding-right: 0px;
border-right: 0px;
margin-right: 0px;

overflow-x:hidden;
width: 100%;

}

非常感谢任何帮助，谢谢!

Answer 1

首先，从以下位置删除“max-size”参数:

#banner-area, #page-body, #page-footer{
    width: auto;
}

然后添加:

.sqs-block-content {
    width: 100%;
}

.image-block-outer-wrapper.layout-caption-hidden {
    display: block;
    float: left;
    position: relative;
    width: 100%;
}

.sqs-block-image .intrinsic {
    display: block;
    float: left;
    margin: auto;
    max-width: none !important;
    position: relative;
    width: 100% !important;
}

但是也有脚本为这个内部类添加了严格的宽度，乍一看我看不出来，这是一种加密，需要时间来理解它...不过，我给你的建议这里肯定会覆盖脚本。

附言我建议您不要使用这种网站构建器(您肯定会使用某种)- 因为有非常难用的类生成器，如果您在那里需要进一步更新 - 您会遇到更多麻烦。