Markdown中实现超宽图片不缩放、带水平滚动条显示的方案问询

可行解决方案 #

你之前的方案问题出在手动给内层div固定了8000px的宽度，才会出现滚动范围远大于实际图片宽度的问题，调整CSS属性即可实现完全符合需求的效果，不需要手动匹配任何单张图片的尺寸，全局写一次样式所有图片都生效。

完整实现代码 #

<style>
/* 全局写一次即可，后续新增图片不需要修改任何样式参数 */
.img-scroll-container {
    overflow-x: auto;
    /* 限制容器最大高度避免滚动条跑到页面底部 */
    max-height: 100vh;
    width: 100%;
}
.img-scroll-container img {
    /* 覆盖所有工具默认的图片最大宽度限制，禁止图片缩放，保持原始尺寸 */
    max-width: none !important;
    width: auto !important;
}
</style>

<!-- 后续插入超宽图片只用套一层外层容器即可，不需要改任何参数 -->
<div class="img-scroll-container">
  <img src="img/German-Cheatsheet.jpg" alt="德语 cheatsheet">
</div>

样式说明 #

• 给外层容器设置overflow-x: auto，只有当图片宽度超过容器宽度时才会出现横向滚动条，不会额外显示多余滚动条
• 给img标签设置max-width: none !important，可以覆盖所有Markdown预览工具默认给img加的最大宽度100%的限制，让图片完全保留原始尺寸，不需要手动指定任何图片相关的px值
• 不需要额外的内层div，容器宽度会自动和图片实际宽度匹配，不会出现滚动范围超出图片实际宽度的问题
• 全局样式只需要写一次，后续所有需要保留原始尺寸的超宽图片，只需要套一层<div class="img-scroll-container">即可，不需要更新样式里的任何固定值

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