Question

我想创建一个图像，将它用于一个简单的滑块，它可以在不滚动的情况下占用整个浏览器的第一部分。

这是我的简单代码： HTML：

<div class="img-header">
    <img src="img/head.jpg" />
</div>

CSS：

.img-header img {
  width: 100%;
  height: 100%;
}

我希望我的问题很明确。

Answer 1

最好的方法是避免图像奇怪地拉伸，但总是100％视口是将background-image设置为{{1} }}

＆＃13;

cover

＆＃13;

html, body{margin:0; height:100%;}

.img-header{
  height:100vh;
  background:url(http://i.stack.imgur.com/xkgPx.jpg) 50% / cover
}

＆＃13;

<强> jsBin playground

Answer 2

您还需要为height和父div定义body, html。如下所示：

.img-header img {
  width: 100%;
  height: 100%;
}

.img-header {
  height: 100%;
}

html, body {
    width: 100%;
    height: 100%;
    margin: 0;
}

<div class="img-header">
    <img src="https://placehold.it/500x300" />
</div>

如何制作一个无需滚动即可获取整个视图的图像标题？

2 个答案: