使用内容大于容器的 flexbox 时的居中问题

Question

我正在尝试使用以下条件将元素（水平和垂直）居中：元素的显示是行内块，因为我希望根据其内容计算其宽度/高度。

当容器大于元素时，一切都很好。

但是，当元素大于容器时问题就开始了，并且元素获取的是容器的宽度而不是其内容。

提前致谢，奥伦

以防万一 jsFiddle 关闭，这里是代码片段：

<div class="working_area">
    <div class="image_container">
        <img src="http://eofdreams.com/data_images/dreams/bear/bear-05.jpg"/>
    </div>
</div>

和

.working_area {
  background: yellow;
  position: absolute;  
  width: 600px;
  height: 600px;
  display: -webkit-flex;
  -webkit-justify-content: center;
  -webkit-align-items: center;
}

.image_container {
  display: inline-block; 
    /*shrink a bit*/
    -webkit-transform: scale(0.7);
    /*-webkit-transform-origin: center center;*/
}

Answer 1

设置图像的百分比大于容器，并根据图像大小减去边距。

例子：

.image_container {
    margin:0 -10%;
    width:120%;
}

这是我在你的代码上做的一个例子

http://jsfiddle.net/GPhzq/3/