Linux版Chrome全屏显示图片出现滚动条及底部白边如何解决

问题根因 #

你遇到的4px差值是<img>标签的默认行内元素特性导致的：行内替换元素默认会和文本基线对齐，底部预留了下沉字符的空间，对应你观察到的4px偏移，Linux版Chrome的全屏渲染逻辑进一步放大了该差异，导致要么出现滚动条要么出现白边。

最优解决方案 #

无需裁剪原图，仅需调整少量代码即可同时解决两个问题，适配任意屏幕分辨率：

方案1：修改全局CSS（推荐） #

直接替换你现有的CSS代码即可：

/* 清除所有元素默认内外边距，统一盒模型 */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
/* 禁止页面滚动，让body和视口完全同大小 */
html, body {
  width: 100vw;
  height: 100vh;
  overflow: hidden;
}
/* 消除img底部默认空白，适配全屏显示 */
#content img {
  display: block;
  width: 100%;
  height: 100%;
  /* 可选：如果不需要裁剪图片保持完整显示，将cover改为contain即可 */
  object-fit: cover;
}

方案2：不修改CSS，仅调整JS代码 #

如果不想改动全局样式，也可以在创建图片元素时直接添加行内样式：

let content = document.getElementById("content");
let ImageDiv = document.createElement("IMG");

ImageDiv.src = pic.file;
// 添加行内样式解决问题
ImageDiv.style.cssText = `
  display:block;
  width:100vw;
  height:100vh;
  object-fit:cover;
`;

content.appendChild(ImageDiv);

两个方案都可以实现：原图无需裁剪、无垂直滚动条、底部无白边、图片自适应屏幕分辨率。

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