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

Question

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

当容器大于元素时everything is fine .

但是，当元素大于容器时，问题就开始了，the element gets the width of the container and not its content .

提前致谢，奥伦

以防 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 img {
    max-width: 100%;
}

制作<img>最大为父级的 100%，否则只会达到它的全宽而不是更宽。

fiddle