媒体查询：发送从顶部图像到页面底部

Question

我试图让图像从我的头去我的页脚或类似的东西，当窗口低于400像素

我不没有任何代码可以显示，我已经研究了几个小时而无济于事。

这可能吗？我使用bootstrap来实现响应。

Answer 1

无论您是否使用Bootstrap，您都可以使用CSS来做到这一点。首先保持移动，我解决了这个问题，以便在窗口宽度超过400像素时，页眉开始在页脚处并移动到顶部。我做了a demo for you。

说你的HTML看起来像这样（我使用的H1，而不是一个IMG标签）：

​​

你的CSS应该是这样的：

body { 
    position: relative; 
    height: auto; 
    background: white; 
} 

h1 { 
    position: absolute; 
    display: block; 
    top: 100%; 
    left: 0; 
    font-size:2em; 
    height:2em; 
    background: gray; 
} 

@media (min-width:400px) { 

    h1 { 
     position: relative; 
    } 

    .content { 
     margin-top: 2em; 
    } 

}