Question

我在页面顶部有一个图像作为背景。它应该是宽度：100％当屏幕很大并且不小于1000px时，但是，当屏幕小于1000px - but it enables it时，不要启用滚动条。怎么解决这个问题？

这是我的代码：

<img alt="Bg1" src="/assets/bg1.png" style="width:100%; min-width:1000px; 
min-height:600px; height:100%; position:absolute; z-index:-1" />

更新： jsfiddle示例 - http://jsfiddle.net/c982gko9/

PS它总是应该在页面的顶部，所以position：fixed不能用...

Answer 1

解决方案：jsFiddle

body{
    margin:0;
}

大多数主流浏览器都有默认的8px保证金（如果我错了，请纠正我。）

Answer 2

我认为您不必添加<img>标记，语义您使用图片作为背景，它也应该是背景！

这是一个解决方案，它是自适应的，仍然可以保持你的图片的分辨率：

.overlay {
  position: fixed;
  left:0;
  top:0;
  right:0;
  bottom:0;
  overflow:hidden;
}
.overlay div {
  width: 100%;
  min-width: 1000px;
  height: 100%;
  min-height: 600px;
  background-image: url(http://www.hdwallpapersimages.com/wp-content/uploads/2014/01/Winter-Tiger-Wild-Cat-Images.jpg);
  background-size: cover;
}

<div class="overlay">
    <div></div>
</div>

Answer 3

检查这是否是您期望的

http://jsfiddle.net/c982gko9/2/

为图像创建包装div。因为你不能告诉图像不要滚动

从图像中移除位置：绝对并使溢出：隐藏为包装div。

#wrapper {
  overflow: hidden;
}

为什么位置：绝对图像启用滚动条？

3 个答案: