自動將超大尺寸的圖片放在div中

Question

我正在嘗試爲以下問題找到解決方案：

我的客戶的博客內容將集中在頁面上。

| bbb | ccccccccc | bbb |

b是身體和c是內容

所以我有一個2columns DIV，之後8columns DIV的內容和另一2columns DIV（我使用的引導）;

| 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%; 
} 

如果需要 和家長DIV IMG的加**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; 
}