如何在没有拉伸或铆接的情况下将图像保持在div内？

Question

我有这个HTML：

<div class="postcard-container">
    <div id="postcard-classic" class="postcard-classic">
        <div class="postcard-classic-img">
            <img ng-src="{{postcard.image.cropped}}" />
        </div>
    </div>
</div>

这个css：

.postcard-container {
    position: absolute;
    display: table;
    width: 100%;
    height: 100%;
    padding: 20px;
}

.postcard-classic {
    display: table-cell;
    vertical-align: middle;
    background-position: center center;
    background-image: url("../img/frames/postcard_00.png");
    background-size: contain;
    background-repeat: no-repeat;
    padding: 10px;  
}

.postcard-classic-img {
    max-height: 100%;
    max-width: 100%;
    width: 100%;
}

我希望我的图像从左上角开始。如果它是一个非常小的图片，它应该被climped到左上角，如果它太大我想要溢出不显示。让我们举一个例子，如果图像太大。我的目标是：

蓝色是图像，红色是div。如果图片太大，我从上面的代码中得到的是以下内容：

我该如何解决这个问题？

编辑

我现在有多远：jsfiddle。如您所见，图像不是从左上角开始，并且溢出不会被隐藏。

Answer 1

您希望的行为应该是div中背景图像的默认行为。所以你应该只需要背景图像和背景重复属性。

.postcard-classic {
  background-image: url("../img/frames/postcard_00.png");
  background-repeat: no-repeat;
}

Answer 2

你不应该指定任何宽度值

 .postcard-classic-img {
    max-height: 100%;
    max-width: 100%;
 }

Answer 3

我想我可以忍受这个解决方案：

fiddle

.postcard-container {
    width: 300px;
    height: 200px;
    position: absolute;
    display: table;
    padding: 20px;
}

.postcard-classic {
    display: table-cell;
    vertical-align: middle;
    background-color: yellow;
    overflow: hidden;
}

.postcard-classic-img {
    display: block;
    position: absolute;
    margin: auto;
    overflow: hidden;
    top: 10%;
    bottom: 10%;
    left: 8%;
    right: 8%;
}

.postcard-classic-img img {
    position: absolute;
    width: 100%;
    height: auto; 
}

Answer 4

使用flex解决方案

.postcard-classic-img{
    width:100%;
    height:250px;
    display:flex;
    justify-content:center;
    align-items:center;
    overflow:hidden
}
.postcard-classic-img img{
     flex-shrink:0;
    -webkit-flex-shrink: 0;
    max-width:100%;
    max-height:100%;
}