我有一个大图像，其高度大于屏幕高度。我对宽度没问题。我需要对其进行裁剪，以便屏幕顶部的 65% 包含此图像。
<body>
<img class="img" src="image.jpg" alt="img">
<p>Description</p>
</body>
如果我如下编写 CSS，整个图像将被压缩以适合 65% 的屏幕。此外，如果我调整屏幕大小，图像会自动开始尝试适应前 65%，使整个屏幕看起来很乱。
body, html { height:100% }
img.img { height:65% }
相反，我想要裁剪图像，使剩余部分适合 65%，然后保持原样。也就是说，如果我现在调整窗口大小，让垂直滚动条出现。我怎样才能做到这一点？
(PS:我不想给一个固定的高度，因为我希望网页也可以在不同的设备上查看，比如手机和iPad。
我想这就是我需要的:
- 获取设备的最大高度(不是浏览器屏幕的当前高度，因为用户可能出于某种原因将其最小化)
- 以适合前 65% 的方式裁剪图片并显示
- 无论用户更改屏幕尺寸如何，都保持图像尺寸不变
但我不确定如何实现它。)
最佳答案
这是您要找的吗:http://jsfiddle.net/JjwMw/1/
body, html {
height: 100%;
margin: 0;
padding: 0;
}
.container {
height: 65%;
width: 100%;
position: relative;
top: -22.75%; /* 65*35/100 */
background-image: url(http://placehold.it/1024x768);
background-size: cover;
background-position: center bottom;
}
请注意，该图像现在是背景图像，并且正在利用 IE8 不支持的背景大小属性(...谁在乎？)。如果图像不能是背景图像，您可以使用填充 hack ( Proportionally scale a div with CSS based on max-width (similar to img scaling) ) 按比例缩放 div 以填充宽度，并将内部图像设置为 100% 宽度和高度。
关于javascript - 如何裁剪图像以适应屏幕所需的高度？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/23688567/