Question

我需要（和失败）做的是这张图片中的网站：

网站需要全屏，无需滚动。我对结果不满意，因为：

- 当在垂直屏幕（智能手机）上打开网站时，底部边框太大

- 我也试图让这个背景图像完全显示在顶部和底部（我希望顶部和底部的面部能够完全看到，而不仅仅是部分），但我真的不知道该怎么做。

我的CSS代码：

html
{

    background: #f36d32;
    width: 98%;
    height: 95.9%;
    padding: 1%;

}

    body
    {
    background: url(http://web-industry.eu/landing/img/bg.png) no-repeat center center fixed; 
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    width: 100%;
    height: 100%;
    }

好的，@imGaurav用这样的代码解决了边界问题：

body {
  background: url('http://web-industry.eu/landing/img/bg.png') no-repeat;
  background-size: 100% 100%;
  width: 100vw;
  height: 100vh;
  box-sizing: border-box;
  border: #f36d32 3px solid;
  padding: 0;
  margin: 0;
}

<body></body>

但我仍然无法弄清楚如何使顶面和底面都可见。

Answer 1

body {
  background: url('http://web-industry.eu/landing/img/bg.png') no-repeat;
  background-size: 100% 100%;
  width: 100vw;
  height: 100vh;
  box-sizing: border-box;
  border: #f36d32 3px solid;
  padding: 0;
  margin: 0;
}

<body></body>

Answer 2

所以你只是希望全尺寸图像能够根据不同的屏幕尺寸进行缩放？

在你的css图片div上尝试：

background-size：contains;

如果这不是你想要的，那么这里是你可以使用和测试的所有属性值的链接。

http://www.w3schools.com/cssref/css3_pr_background-size.asp

Answer 3

将以下CSS添加到您的HTML正文

position: absolute;left: 0;top: 0;

Answer 4

你的意思是那样的吗？

<div class="vertical-container">
    <div class="vertical-middle">
        <img src="http://www.susansolovic.com/blog/wp-content/uploads/2014/04/instagram-logo-md-300x300.png">
    </div>
</div>


html,body {
    height: 100%;    
}

img {
    max-width: 100%;
    max-height: 100%;
}

.vertical-container {
    background-color: green;
    display: table;
    height: 100%;
    width: 100%;
    text-align: center;
}
.vertical-middle {
    height: 100%;
    vertical-align: middle;
    display: table-cell;
}

https://jsfiddle.net/org72bfb/1/

Answer 5

您可以使用以下css来解决问题。参考CSS-trick

html { 
  background: url(http://i.stack.imgur.com/zRKcX.jpg) no-repeat center center fixed; 
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

与边界的全屏幕背景图象

5 个答案: