html - SVG + CSS : sizing one image inside another

Question

目标是将一张图像放入另一张图像中。

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>

Answer 1

您的图像尺寸为 2688x1242 和 1792x828。得出的比率为 2.1642。

在另一边，在 foregroundBox 中，将尺寸设置为 2540x1090，比率为 2.33

然后，object-fit: contains 将强制调整大小，因为比例不合适。

您需要将 foregroundBox 尺寸更改为与图像比例相同的尺寸，一切都会好起来的