显示带有背景大小的完整图像（高度）：封面答案

【问题标题】：show full image (height) with background-size: cover显示带有背景大小的完整图像（高度）：封面
【发布时间】：2016-05-07 16:47:19
【问题描述】：

我正在使用 stellar.js 编写一个带有视差的 html 页面。在 CSS 中我使用：

html, body {height: 100%;}

#slide1 {
height: auto;
background-image:url('../images/1.jpg');
background-color:#fff;
background-repeat: no-repeat;
background-size: cover;
background-attachment: fixed; }

但是图片被剪掉了，图片底部不可见。

是否可以设置部分（#slide1）的高度以显示所有图像？

【问题讨论】：

标签： html css parallax background-size stellar.js

【解决方案1】：

使用background-size:cover; 将始终垂直或水平裁剪背景图像，除非元素具有与图像完全相同的高宽比。关键是要选择和定位背景，使其在切割时仍然看起来不错。

很可能，你想给你的元素一个min-height，例如：

#slide1 {
  min-height: 600px;
}

请记住，最流行的桌面比例是 16:9，并且大多数移动设备都是垂直放置的。如有必要，使用@media 查询不同的设备/视口宽度。

如果您不希望幻灯片的高度大于视口高度（deviceScreen|browser 高度），请将max-height: 100vh!important; 添加到上述规则（在移动设备上很有用）。

【讨论】：

【解决方案2】：

尝试将#slide1 height 属性设置为 100%，而不是使用 auto。

【讨论】：

你的解决方法就像祈祷一样有效。
你的评论安德烈很幼稚、侮辱性和不当。
您的答案将问题传递给包含块，该包含块可能有也可能没有足够的设置/结果height，以便#slide1 显示更多的背景图像。此外，您没有解释何时以及为什么会起作用，从而使解决方案不合适，而我的比较相当合适。我并不是说这是一种侮辱，我希望你能看到相似之处并提高你未来答案的质量。
不起作用。 100% 时，它的高度等于浏览器窗口的 8，而不等于图像。