Sprite图片高度被限制为屏幕高度的原因及解决方法

我将多张大图合并为一个Sprite，每张图完整显示时尺寸均大于iPad屏幕。当Sprite中仅含单张图片时，可通过滚动查看完整内容；但含多张图片时，仅能横向滚动，高度被截断为屏幕高度，无法向下滚动查看剩余部分，横竖屏切换时高度会适配对应屏幕高度。

原代码如下：

<!DOCTYPE html>
<html lang="en"> 
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="general.css">

<style>
#img1 {
background: url("bates-sprite.jpeg");
background-repeat: no-repeat;
object-fit: none;
width:  2049px;
height: 1537px;
}

#img1 {object-position: 0 0;}
</style>
</head>
<body>

<img id="img1" src="bates-sprite.jpeg" alt="Camberley Mail front page report">

</body>
</html>

问题核心在于视口约束和元素高度的强制限制，按以下步骤修改即可解决：

• 修正viewport配置：移除可能隐含的height=device-height约束（原代码虽未写，但部分浏览器会默认关联），确保视口不会锁定屏幕高度，允许内容纵向溢出滚动。
• 清除冗余样式：<img>标签同时设置src和background属于冗余，保留src即可，避免渲染冲突。
• 取消固定高度限制：不要给图片设置固定高度，改用height: auto让元素自然撑开，完整显示Sprite的原始高度。
• 设置body基础样式：清除body默认边距，开启双向溢出滚动，确保超出屏幕的内容能被滚动查看。

修改后的代码：

<!DOCTYPE html>
<html lang="en"> 
<head>
    <meta charset="UTF-8">
    <!-- 修正viewport，确保内容可自由溢出滚动 -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="general.css">

    <style>
        /* 清除body默认边距，开启双向溢出滚动 */
        body {
            margin: 0;
            padding: 0;
            overflow-x: auto;
            overflow-y: auto;
        }

        #img1 {
            object-fit: none;
            width: 2049px;
            /* 取消固定高度，让图片按原始尺寸撑开 */
            height: auto;
            object-position: 0 0;
        }
    </style>
</head>
<body>
    <img id="img1" src="bates-sprite.jpeg" alt="Camberley Mail front page report">
</body>
</html>

补充说明：如果需要让Sprite自适应屏幕宽度但保持比例，可将width改为100%，height保持auto，此时横向内容会被缩放，但纵向仍能完整滚动显示。

内容的提问来源于stack exchange，提问作者Hobbyist