css - 如何在不拉伸(stretch)或固定图像的情况下将图像保留在 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%;
}

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

其中蓝色是图像，红色是 div。如果图片太大，我从上面发布的代码中得到的结果如下:

我该如何解决这个问题？

编辑

这就是我现在有多远:jsfiddle .如您所见，图像不是从左上角开始的，溢出也没有隐藏。

Answer 1

您想要的行为应该是 div 中背景图像的默认行为。所以你应该只需要 backround-image 和 background-repeat 属性。

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