Question

我正在尝试制作一个可水平滚动的网站。我截取了我的客户演示网站的屏幕截图，并将其标记为图1-8。为了使网站水平滚动，我将所有图像放在div中并设置no-wrap属性。问题是：每张图片对我的屏幕都太大了。我希望每个图像都完全符合我的视口大小。我的问题是：无论屏幕大小如何，如何使每个图像完全适合整个屏幕？

HTML：

<html>  
  <head>
    <link rel="stylesheet" type="text/css" href="main.css">
    <script src="jquery-2.1.1.js"></script>
    <script src="jquery.scrollpath.js"></script>
    <script src="createScroll.js"></script>
  </head>
  <body>
    <div id="scrollable">
      <img src="1.png"></img> 
      <img src="2.png"></img>
      <img src="4.png"></img>
      <img src="5.png"></img>
      <img src="6.png"></img>
      <img src="7.png"></img>
      <img src="8.png"></img>
    </div>
  </body>
</html>

CSS：

#scrollable {
  display: inline;
  white-space:nowrap;
  float: left;
}

Answer 1

试试这个，将vh与max-height一起使用：

CSS：

#scrollable {
    width: 100%;
    white-space: nowrap;
    overflow-x: scroll;
}

img {
    display: inline-block;
    height: 100vh;
}

请参阅JSFiddle：http://jsfiddle.net/48ck23L9/4/

请注意，第二张图片最初小于视口。

Answer 2

如果您想要一些非常响应的内容，我会选择 DIV 元素和背景图片。毕竟这是关于图像的。

jsBin demo （调整大小以查看魔法！）

<div id="scrollable">
  <div style="background-image: url(1.jpg);"></div>
  <div style="background-image: url(2.jpg);"></div>
  <div style="background-image: url(3.jpg);"></div>
</div>

简单CSS：

#scrollable{
  height:100%;
  overflow-x: auto;
  white-space: nowrap;
}

#scrollable > div{
  background: none 50% / cover;
  display:inline-block;
  width:100%;
  height:100%;
  margin-right:-4px;
}

注意：请使用此技术，因为您可以清楚地看到图像将被裁剪为合适，但每张图片都会完全符合您的要求：

我希望每张图片都完全符合我的视口尺寸。我的问题是：无论屏幕尺寸如何，如何使每张图片完全适合整个屏幕？

_{否则，如果你想保留整个图像，那么答案就是简单的。使 100％高度容器区域。}

Answer 3

您可以使用vh和vw单位。

img {
    height: 100vh;
    width: 100vw;
}

无论屏幕尺寸如何，如何使图像完全适合整个屏幕？

3 个答案: