Question

我正在尝试使我的img在页脚部分响应从Ipad横向视图模式开始直到27英寸英寸视图模式。这里一个重要的细节是我希望它在我的谷歌地图和表格部分之间。

我已尝试将其定位为绝对，我可以在谷歌地图和表单部分之间获取它。但是在右侧有一个可以滚动到的空白区域。请访问该网站以了解我所谈论的内容。我不希望任何东西能够滚动到两侧。 IMG应覆盖每个提到的屏幕视图模式的全宽。

www.fantazihuis.be

HTML

<footer>
    <img src="images/footer.png" alt="Fantazihuis footer" />
</footer>

CSS

    footer{
    margin-bottom: -130px;
    position: absolute;
    bottom: 0;
    width: 100%;}


footer img{
    width: 100%;}

Answer 1

您必须创建媒体查询。您为媒体查询设置了最大宽度分辨率，并为每个分辨率指定了自己的样式表：

示例：

@media (min-width: 30em) and (max-width: 60em) { 
    footer { 
        margin-bottom: -60px; 
        position:absolute;
        bottom:0;
        width: 100%; 
    }
}

Answer 2

出于某些疯狂的原因，我的浏览器没有正确显示它。在我通过我的ftp将我的本地文件与在线文件同步后，页脚中的IMG显示正确。

在这种情况下CSS是正确的，不需要任何调整。没有可滚动的右侧。

但是，我仍然需要添加媒体查询，以使整个网站包括IMG页脚响应不同的屏幕视图。

如何使页脚上的图像响应？

2 个答案: