HTML/CSS：带有背景图像的图像

我有以下图像框：

现在我有几个图像，它们都应该以这个框架为背景。例如，如果我有此图像：

我希望结果如下：

我希望背景图像帧始终具有相同的大小（例如300*400），我希望帧的图片在帧内居中，我希望悬垂部分被切断

我将此css设置为背景：

.pola {
    margin-left: auto;
    margin-right: auto;
    background-position: center center;
    background-image: url("../img/frames/frame_01.png");
    background-size: contain;
    background-repeat: no-repeat;
}

---

但我不知道如何从这里继续下去。我该怎么做呢？

您可以在图像周围使用边框和方框阴影来创建类似的布局

.frame{
-moz边框底色：无；
-moz边框左侧颜色：无；
-moz边框右颜色：无；
-moz边框顶部颜色：无；
背景图像：url（“http://placehold.it/500x300");
背景位置：-100px中心；
边框颜色：#e8e8e9；
边界图像：无；
边框样式：实心；
边框宽度：20px 20px 100px；
长方体阴影：0 5px灰色；
高度：320px；
宽度：320px；
}

---

在这里，您放置的任何图像都可以放入父帧

中。
.pola{
左边距：自动；
右边距：自动；
背景位置：中心；
背景图像：url（“http://i.stack.imgur.com/Q4NJZ.png");
背景尺寸：包含；
背景重复：无重复；
宽度：400px；
高度：486px；
位置：相对位置；
}
pola img先生{
宽度：92%；
身高：85%；
位置：绝对位置；
顶部：10px；
左：0；
右：0；
保证金：自动；
}


这是编写已有代码的简单方法。如果您想将框架置于另一个图像之上，只需将图像置于框架url（）之后，如下所示：

.pola {
   margin: 0 auto;
   background: url("../img/frames/frame_01.png"), url("../img/this image is behind the frame") no-repeat fixed top center;
}

希望这能有所帮助。
jsfiddle就好了。可能是这样的：
when
.pola img{宽度：300px；高度：400px；位置：相对；顶部：15px；左侧：15px；}
。请注意，您必须使用
顶部
，
左侧
道具，直到它适合背景。是否尝试过边框图像属性？但是它不适用于较旧的浏览器好主意，但我不能使用它，因为底部边框像50px和上、左、右20px。这是一个很好的解决方案，但不幸的是底部边框太小。我需要显示完整的框架。@Mulgard您可以调整高度，请参阅更新的答案。
.pola {
   margin: 0 auto;
   background: url("../img/frames/frame_01.png"), url("../img/this image is behind the frame") no-repeat fixed top center;
}