Question

我有来自设计师的模型，我想与同事分享以获得批准，我希望图像填满浏览器访问的用户宽度，但允许像网站那样滚动。

我尝试使用以下CSS代码执行此操作：

<!DOCTYPE html>
<html>
<head>
<style>
body {
    margin:0;
}
html, body, .image {
    position:relative;
    width:100%;
    background-image:url('05.jpg');
    background-size:cover;
}
</style>
</head>
<body>
<div class='image'></div>
</body>
</html>

The result是一个填充宽度100％但不允许滚动的图像，隐藏image的其余部分。如何仅填充页面的宽度，但允许滚动图像的其余部分？

我发现这个类似question，但无法使用共享代码使其工作。

Answer 1

为什么不直接将图像用作常规图像：

body {
  margin: 0;
}

.x > img {
  width: 100%;
  height: auto;
}

<body>
  <div class='x'>
    <img src="http://placehold.it/2000x2500/fc0">
  </div>
</body>

这是一个具有相同代码的codepen（代码段当前显示错误消息“Service unavailable”）：

https://codepen.io/anon/pen/XgVBKg

CSS：将可滚动图像拉伸到用户窗口的100％

1 个答案: