Bootstrap3下图片宽度异常求助：无法居中200x200px图片

别担心，我们可以通过精准的CSS覆写来解决这个问题，同时保留其他图片的响应式特性，完全不需要修改主CSS文件。下面是几个实用的方案：

方案一：给目标图片添加自定义类（推荐） #

这种方法最灵活，只会影响你指定的图片，不会破坏全局的响应式规则：

1. 给那200x200px的图片添加两个类：一个自定义类用来覆写宽度，另一个用Bootstrap自带的类实现居中：

<img src="你的图片路径" class="img-original-size center-block" alt="图片描述">

2. 在你的自定义CSS中添加以下代码：

/* 覆写主CSS的width:100%，让图片保持原始尺寸 */
.img-original-size {
  width: auto !important;
  max-width: 100%; /* 可选：防止图片在极小屏幕上超出容器 */
}

• width: auto会让图片保持自身的原始宽高比和尺寸，刚好抵消主CSS的width:100%；
• !important用来确保这个样式优先级高于主CSS的规则；
• Bootstrap的center-block类会自动设置display:block和margin:0 auto，帮你快速实现图片居中；
• 加上max-width:100%是个保险项：当屏幕宽度小于图片原始尺寸时，图片会自动缩小以适应容器，避免溢出。

方案二：通过父容器选择器精准定位（无需修改HTML） #

如果不想给图片额外加类，可以利用左侧列的父容器选择器，只针对该区域的图片生效：

假设你的左侧列有唯一标识类（比如.left-sidebar），可以写这样的CSS：

/* 仅作用于左侧列中的cms-area图片 */
.left-sidebar .cms-area img {
  width: auto;
  display: block;
  margin: 0 auto;
  max-width: 100%; /* 可选的响应式保险 */
}

这样就不会影响页面其他区域的.cms-area img，完美保留它们的响应式特性。

可选：兼顾移动端的响应式优化 #

如果希望在移动端（比如屏幕宽度小于768px）时，这张图片也能自适应容器宽度，可以添加媒体查询：

@media (max-width: 767px) {
  .img-original-size {
    width: 100% !important;
  }
}

这样桌面端保持200x200px居中显示，移动端自动铺满容器，兼顾了两种场景的体验。

另外纠正一个小细节：CSS里并没有width:none这个属性，你之前提到的正确写法应该是width:auto，这才是让图片回归原始尺寸的正确方式~

内容的提问来源于stack exchange，提问作者MK-DK