本文介绍了无论屏幕尺寸如何，我如何使图像完全适合整个屏幕？的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我试图制作一个水平滚动的网站。我截取了我的客户演示网站的截图，并将它们标记为图像1-8。为了使网站水平滚动，我把所有的图像放在一个div中，并设置no-wrap属性。问题是：每张图片对于我的屏幕来说都太大了。我希望每个图像完全适合我的视口的大小。我的问题是：无论屏幕大小如何，我如何让每张图片都适合整个屏幕？ p> < HTML>
< head>
< link rel =stylesheettype =text / csshref =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;
}
解决方案
试试这个，使用 vh with max-height ：
CSS：
#scrollable {
width：100％;
white-space：nowrap;
overflow-x：scroll;
}
img {
display：inline-block;
身高：100vh;
请参阅JSFiddle：
请注意，第二张图像最初比视口小。
I am trying to make a horizontally scrollable website. I took screenshots of my clients demo website, and labeled them out as images 1-8. To make the site scrollable horizontally I put all the images in a div and set no-wrap property. The problem is: Each image is too big for my screen. I want each image to perfectly fit the size of my view port. My question is: How do I make each image fit the entire screen fully, regardless of screen size?
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;
}
解决方案
Try this, use vh with max-height:
CSS:
#scrollable {
width: 100%;
white-space: nowrap;
overflow-x: scroll;
}
img {
display: inline-block;
height: 100vh;
}
See JSFiddle: http://jsfiddle.net/48ck23L9/4/
Note that the second image is originally smaller than the viewport.
这篇关于无论屏幕尺寸如何，我如何使图像完全适合整个屏幕？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！