如何实现无滚动全屏布局并让图片容器与图片保持原生尺寸

首先，咱们先解决你提到的.parent设置height:100%不生效的问题，再搞定图片容器和图片的原生尺寸保留需求。

一、修正.parent高度不生效的问题 #

你之前用max-height:100vh给html和body设置高度，这只是限制最大高度，而非强制占满视口高度——当内容高度小于视口时，body的高度会跟随内容，导致.parent的max-height:inherit无法撑满整个视口。

调整后的基础样式应该是这样：

html, body {
  margin: 0;
  padding: 0;
  height: 100vh; /* 强制占满整个视口高度 */
  overflow: hidden; /* 隐藏页面滚动条，消除白边 */
}

.parent {
  height: 100%; /* 父元素（body）有明确高度后，100%继承就生效了 */
  overflow: hidden; /* 裁剪超出视口的图片内容，配合panzoom拖拽 */
  position: relative; /* 可选，给panzoom提供定位上下文 */
}

这样就完美实现了你的前3项需求：页面无滚动条、body与屏幕尺寸一致、.parent完全贴合body尺寸。

二、让.image-container和img保持原生尺寸 #

默认情况下，块级元素的.image-container会自动撑满父容器宽度，导致它的尺寸无法跟随图片原生大小。我们只需要改变容器的显示方式，再确保图片不被拉伸即可：

.image-container {
  display: inline-block; /* 让容器宽度/高度完全贴合内部图片 */
}

.image {
  width: auto;
  height: auto; /* 强制图片保留原生宽高比和尺寸 */
  display: block; /* 消除img作为行内元素的底部空白间隙 */
}

解释： #

• display: inline-block 让.image-container不再强制撑满父元素，而是由内部的图片来决定自身尺寸，这样它的宽高就和图片原生尺寸完全一致了。
• width: auto; height: auto; 确保图片不会被浏览器默认的缩放规则修改，严格保留原生大小。
• display:block 是为了去掉图片作为行内元素时，底部默认的几像素空白，让容器高度完全匹配图片高度。

三、配合panzoom的最终效果 #

你的panzoom插件可以直接作用于.image-container（也就是#image元素），这样图片就能在.parent容器内自由拖拽、缩放，超出视口的部分会被.parent的overflow:hidden裁剪，完全符合你的需求。

最终完整的CSS代码：

html, body {
  margin: 0;
  padding: 0;
  height: 100vh;
  overflow: hidden;
}

.parent {
  height: 100%;
  overflow: hidden;
  position: relative;
}

.image-container {
  display: inline-block;
}

.image {
  width: auto;
  height: auto;
  display: block;
}

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