我有这个网站:如何在div内保持图像而不伸展或压缩?
<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%;
}
我想我的形象在左上角开始。如果它是一个非常小的图片,应该爬到左上角,如果它太大,我想溢出不显示。让我们举一个例子,如果图像太大。我的目标是:
其中蓝色是图像和红色股利。
我怎样才能解决这个问题:什么我从我上面的代码张贴是,如果图片太大以下?
编辑
,这是我现在在多大程度上是:jsfiddle。正如你所看到的,图像不是从左上角开始的,溢出没有隐藏。
你能提供一个小提琴吗? – RWAM
这正是你想要做的:https://www.exratione.com/2011/09/how-to-overflow-a-background-image-using-css3/ –
用小提琴更新 – Mulgard