为什么网站顶部添加的图片两侧被裁剪？如何保留完整原图显示

问题原因 #

页面图片出现两侧裁剪是两个常见默认样式导致的：

• 浏览器默认给body标签设置了8px左右的外边距，挤占了图片的横向显示空间
• 图片原始宽度超出当前视口宽度时，超出部分默认会被视口截断，没有做适配处理

解决方案 #

方案1：保留图片原始尺寸，允许超宽时横向滚动查看完整图 #

修改你的CSS代码如下：

/* 先重置浏览器默认全局样式，消除默认边距影响 */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
.body {
    text-align: center;
    background-color: rgb(172, 172, 172);
    overflow-x: auto;
}
.topimage {
    display: block;
    margin: 0 auto;
}

方案2：图片自适应屏幕宽度，无横向滚动且完整显示不裁剪 #

如果不需要保留原始尺寸的显示大小，只需要完整显示图片内容、自适应不同设备宽度，使用以下CSS：

/* 先重置浏览器默认全局样式，消除默认边距影响 */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
.body {
    text-align: center;
    background-color: rgb(172, 172, 172);
}
.topimage {
    /* 最大宽度不超过父容器宽度，高度自动适配保持原始比例不会变形 */
    max-width: 100%;
    height: auto;
    /* 消除行内元素默认的底部空白间隙 */
    display: block;
    margin: 0 auto;
}

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