无论屏幕大小如何，如何使图像完全适合整个屏幕？答案

【问题标题】：How do I make images fit the entire screen fully, regardless of screen size?无论屏幕大小如何，如何使图像完全适合整个屏幕？
【发布时间】：2014-12-27 00:39:26
【问题描述】：

我正在尝试制作一个可水平滚动的网站。我截取了我的客户演示网站的屏幕截图，并将它们标记为图像 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;
}

【问题讨论】：

这有帮助吗？ stackoverflow.com/questions/4684304/…
父 DIV 元素不需要 float: left; 和 display:inline。
关闭</img> 标签也没用。

标签： html css

【解决方案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/

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

【讨论】：

如果图像小于屏幕，这将不起作用。
也没有 100vh: jsfiddle.net/48ck23L9/5 100% 100% 绝对容器就足够了
酷！非 html5 浏览器也可能更好地支持这一点 =)

【解决方案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% 高度成为容器区域。}

【讨论】：

【解决方案3】：

您可以使用vh 和vw 单位。

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

【讨论】：

这会将图像拉伸到视口大小，这样图像就会倾斜。
嗯，是的，这确实是问题所要求的。问题是要求所有图像都适合浏览器窗口，“无论屏幕大小如何”。这意味着有时图像必须倾斜。