Question

目标是使一个图像适合另一个图像。

iPhone框架和屏幕截图均为1242x2688。框架的填充为76（左/右）和74（上/下）。但是，这些值仍然在屏幕截图的顶部和底部之间留有垂直间隙。为什么？

Codepen：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。

另一方面，在前景色框中，将尺寸设置为2540x1090，比例为2.33

然后，对象比例：包含将强制调整大小，因为该比例不适合。

您需要将前景色框尺寸更改为与图片具有相同比例的东西，一切都会好

Answer 2

最好使用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>

该应用程序可在所有现代浏览器中自适应运行。

Answer 3

调整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>

SVG + CSS：在另一个图像中调整一个图像的大小

3 个答案: