目标是将一个图像放入另一个图像中。
iPhone框架和屏幕截图均为1242x2688。框架的填充为 76(左/右)和 74(上/下)。然而,这些值仍然在屏幕截图的顶部和底部之间留下垂直间隙。为什么?
代码笔:https://codepen.io/anon/pen/vvoKjO?editors=1000
html,
body {
margin: 0;
width: 100%;
height: 100%;
overflow: hidden;
background: rgba(0, 0, 0, 0);
}
.elemBox,
.backgroundBox.design,
.elemBox>* {
position: absolute;
}
.backgroundBox {
width: 100%;
height: 100%;
object-fit: contain;
}
.elemBox.graphic img {
width: 100%;
height: 100%;
object-fit: contain;
}
<svg id="designBox" width="100%" height="100%" viewBox="0 0 1242 2688">
<foreignObject width="100%" height="100%">
<img class="backgroundBox design" src="/images/general/transparent.gif" style="left:0%; top:0%; width:100%; height:100%; background:#00B9FC">
<div class="elemBox graphic movable" style="left: 0px; width: 1242px; height: 2688px; top: 0px;" id="g3kIEZGGog71">
<div class="foregroundBox" style="top: 74px; left: 76px; width: 1090px; height: 2540px;">
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/2707120/Screenshot.png">
</div>
<img class="backgroundBox" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/2707120/XS_Max_Space_GrayNEW.png">
</div>
</foreignObject>
</svg>
您的图像为 2688x1242 和 1792x828。这给出了 2.1642 的比率。
另一方面,在前景框中,将尺寸设置为 2540x1090,其比率为 2.33
然后,对象拟合:包含将强制调整大小,因为比例不适合。
您需要将前景框尺寸更改为与图像比例相同的尺寸,一切都会好起来
最好使用 svg
标记将图像添加到svg
片段<image>
SVG 应用程序中没有需要自动传输的文本,例如HTML
因此无需使用<foreignObject>
有不同的大小,因此我们以智能手机的图像为基础,带有文本的图像将适合第一张图像的大小。
<image transform="translate(65 77) scale(0.9 0.99)"
.container {
width:25%;
height:25%;
}
<div class="container">
</style>
<svg id="designBox" width="100%" height="100%" viewBox="0 0 1242 2688">
<image transform="translate(65 77) scale(0.9 0.99)" width="100%" height="100%" xlink:href="https://s3-us-west-2.amazonaws.com/s.cdpn.io/2707120/Screenshot.png" />
<image class="backgroundBox" width="100%" height="100%" xlink:href="https://s3-us-west-2.amazonaws.com/s.cdpn.io/2707120/XS_Max_Space_GrayNEW.png" />
</svg>
</div>
该应用程序可在所有现代浏览器中自适应运行。
调整CSS,删除一些并简化一些应该可以解决此问题。
html,
body,
.backgroundBox,
.elemBox.graphic img {
width: 100%;
height: 100%;
}
html,
body {
margin: 0;
overflow: hidden;
background: rgba(0, 0, 0, 0);
}
.elemBox,
.backgroundBox.design,
.elemBox>* {
position: absolute;
}
<svg id="designBox" width="100%" height="100%" viewBox="0 0 1242 2688">
<foreignObject width="100%" height="100%">
<img class="backgroundBox design" src="/images/general/transparent.gif" style="left:0%; top:0%; width:100%; height:100%; background:#00B9FC">
<div class="elemBox graphic movable" style="left: 0px; width: 1242px; height: 2688px; top: 0px;" id="g3kIEZGGog71">
<div class="foregroundBox" style="top: 74px; left: 76px; width: 1090px; height: 2540px;">
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/2707120/Screenshot.png">
</div>
<img class="backgroundBox" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/2707120/XS_Max_Space_GrayNEW.png">
</div>
</foreignObject>
</svg>