在一个透明图像上添加两张图片包含两个帧，我们可以在该帧上调整两张图片的大小

Question

我想在一个帧/ img中添加两张图片。我们可以在帧上旋转图像。但是旋转不会从他的boudry中出来，只能拉伸到它的轴：

我已经添加/提交了一张图片并添加了背景，但那不正确。因为如果我必须添加两张图片，我们不能放两张背景图片？。我们必须看看列/帧是空的只是选择图片上的那张图片，我们可以像fabric.Js。

一样调整大小/进行调整

Answer 1

只需使用CSS执行此操作：

#frame {
    width: 700px;
    height: 525px;
    position: relative;
    overflow: hidden;
    background: transparent url(https://i.stack.imgur.com/E4BCt.png) 0 0 no-repeat
}
#frame:before,
#frame:after {
    transform: rotate(21deg);
    content: '';
    position: absolute;
    width: 230px;
    height: 350px;
    z-index: -1
}
#frame:before {
    transform: rotate(21deg);
    top: 88px;
    left: 410px;
    background: url(https://image.ibb.co/mHHved/frame1.jpg) 0 0 no-repeat
}
#frame:after {
    transform: rotate(-23deg);
    top: 45px;
    left: 77px;
    background: url(https://image.ibb.co/fivsQJ/frame2.jpg) 0 0 no-repeat
}

<div id="frame"></div>