响应式图片在Chrome和Safari中的行为有所不同

Question

我将提供准确解决方案的屏幕截图，但是如果您希望我在codepen中使用代码并共享链接。 http://codepen.io/anon/pen/YGgAgZ

简单地让我们专注于灰度图像，它由.container-div分类div包裹。 这个CSS在Chrome，Firefox中的表现与预期的一样，但在Safari中却有所不同。 我想这可能是身高的问题，因为在safari中，图像比原始尺寸更高。有解决方案吗

.container-div {
    float: right;
    width: 44.114583333333336%;
    height:auto;
    /*transform is prefixed correctly in the original CSS*/
    transform:translate(0%, 74%);

}
.container-div img{
    max-width:100%;
    max-height:100%;
}

这是Safari 这是Chrome