Question

我的图像大小为3800x2000。我现在想要在CSS中做的是使3800的宽度始终完全适合浏览器的宽度，并始终具有所显示图像的完整高度。意味着我必须向下滚动broswer才能看到图像的结尾。我说的是背景图片。非常感谢你提前。

Answer 1

首先，非常感谢你的回答。在几个屏幕上完美测试的是

<img src="bg.jpg" style="width: 100%; position: absolute;"/>

那为我做了。再次感谢你。

Answer 2

实际上很简单

旧CSS解决方案

img {
  width: 100%;
}

<img src="http://www.jpl.nasa.gov/spaceimages/images/mediumsize/PIA17011_ip.jpg">

新的CSS解决方案

html, body {
  width: 100%;
  height: 100%;
}

div {
  width: 100%;
  height: 100%;/*or 9999px*/
  background-size: cover;
  background-image:url(http://www.jpl.nasa.gov/spaceimages/images/mediumsize/PIA17011_ip.jpg)
}

<div></div>

您可以增加height上的div，或将其保留为100%

JavaScript解决方案

window.onresize = function () {
  var elems = document.getElementsByClassName('adjustwidth'),
    i;

  for (i = 0; i < elems.length; i += 1) {
    elems[i].style.width = (window.innerWidth || 0) + 'px';
  }
}

window.onresize();

<img class="adjustwidth" src="http://www.jpl.nasa.gov/spaceimages/images/mediumsize/PIA17011_ip.jpg" />

我提供JavaScript解决方案的原因是父母宽度不是100％的元素，它仍然有效。

Answer 3

使用background-size: 100% 2000px;如果你想保持高度正好是2000px，或者如果你想在不改变宽高比的情况下包含bg图像（在你的情况下，图像尺寸将变为＆lt;窗口高度。因此没有滚动来看到img结束）使用background-size:contain。如果它是身体背景并且您希望它覆盖身体，那么使用background:cover

mdn

Answer 4

单独使用css相对于背景图像具有高度的元素比例是不可能的。如果您坚持使用背景图片，则可以使用“{hack”解决方案here。但我建议您使用<img>标记并更改其样式属性。

JSFiddle

.dat-image-doe {
  position: absolute;
  top: 0;
  z-index: -1;
  width: 100%;
  height: auto;
}

使用绝对位置，您可以将图像移动到页面上的任何其他内容后面，并将其用作“背景图像”，这仍然有助于页面的长度（您可以向下滚动浏览器以查看结尾图像）。

此外，如果您还没有，请确保将<body>的边距设置为0。不这样做导致不必要的水平滚动。

使背景图像100％宽度并向下滚动。（CSS）

4 个答案:

旧CSS解决方案

新的CSS解决方案

JavaScript解决方案