在div中自动居中过大的图像

Question

我正在尝试为以下问题找到解决方案：

我的客户博客帖子的内容将集中在页面上。

  

| BBB | ccccccccc | BBB |

b是正文，c是内容

所以我有一个2columns div，在8columns div之后有内容和另一个2columns div（我正在使用bootstrap）;

  

| 2col | --- --- 8col | 2col |

我的问题是我希望帖子上比8columns div大的图像水平集中在整个页面上。

  

| 2col | --- --- 8col | 2col |
  | 2col | CCCCCCCC | 2col | c是正常内容
  | - ############ - |
  | - ############ - | ＃是图片
  | 2col | --- --- 8col | 2col |

我无法放置包裹img元素的任何元素; 我不知道图像的大小，因为它会发生在我在帖子上插入的任何图像中;

我搜索了很多不同的解决方案，但所有这些解决方案都使用了图像的大小，右边是50％边距，另一边是图像大小的一半。在某些解决方案中，我需要用另一个元素包装图像，在我的情况下，它不是很有趣，因为它应该在我的客户发布的每个图像上完成。

希望你能帮助我。谢谢！

修改

这是我的HTML：

`

<div class="row">
    <div class="hiden-xs hiden-sm col-md-2 col-lg-2">
    </div>
    <div class="col-xs-12 col-sm-12 col-md-8 col-lg-8">
        {{ content }}
    </div>
    <div class="hiden-xs hiden-sm col-md-2 col-lg-2">
    </div>
</div>

`

我所说的是，如果我在“内容”上的图像大于8col，我希望它具有原始尺寸，因此width:100%不适用于我：/

我还尝试在img上使用margin: 0 auto 0 auto;，但它仅适用于小于8col的图像。任何大于8col的图像都会自动对齐到8 col的左侧。

编辑2

我想要的： http://i.stack.imgur.com/Kz4m1.png

发生了什么： http://i.stack.imgur.com/h3LuG.png

Answer 1

希望它会帮助你

img{ 
max-width:100%;
}

如果需要的话    和img的父div添加**text-align:center**

Answer 2

<强> CSS

img {
    display: block;
    max-width: 100%;
    height: auto;
    margin: 0 auto;
}

Answer 3

喜欢这个

<强> demo

<强> CSS

body {
    margin: 0 150px;
}
.imageContainer {
    border: 1px solid #444;
    overflow: hidden;
    width: 100px;
    height: 100px;
    margin: 15px;
    text-align: center;
}
.imageContainer > span {
    display: block;
    width: 1000px;
    margin-left: -450px; /* -(width-container width)/2 */
}
.imageContainer > span > img {
    display: inline-block;
}