Question

我正在建立一个基于模板的网站。它使用bootstrap，可以在这里看到http://www.tombelina.com/fcrusade/

我正试图让第一张图片在移动设备屏幕上占据整个屏幕。目前它适用于台式机，但我无法使用移动设备。

Answer 1

在CSS中使用@media。这是一个例子：

 @media screen and (max-device-width: 480px) {
   img.classname {
     float: left;
     width: 200px;
   }
 }

只需将classname更改为任何类并将其提供给图像。

<强> - 或 -

你可以用这个：

body {
    background: url('http://www.flywavez.com/images/sexy-girl-listening.jpg') no-repeat fixed;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}

参考：CSS to make images resize and fit any screen the same

Answer 2

我想在你的网站上，你应该为背景添加一些颜色（黑色适合我相信）。至于图像你应该尝试这个css代码：

    [Image]{
height: 100vh; //which means the image will have the height of the screen. NOTE: Of the SCREEN and not the WEBPAGE.
}

您可以执行此操作并获取屏幕上图像的大小。

Answer 3

你必须使用@media

`@media (max-width: 767px){
   header .header-content{
      height: 550px;
   }
 }`

Your site will look like this

Answer 4

我认为这是因为你的游戏跟踪图像太宽了顶起布局。它比页面的100％宽。添加对该图像的“img-responsive”类 - @aquinas

使html div占据全屏高度

4 个答案: