CODEWITHSUNDEEP
htmlcsssvg
Crashalot
Crashalot

Reputation: 34523

SVG + CSS: sizing one image inside another

The goal is to fit one image inside another.

Both the iPhone frame and the screenshot are 1242x2688. The frame has padding of 76 (left/right) and 74 (top/bottom). Yet these values still leave vertical gaps between the top and bottom of the screenshot. Why?

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>

Upvotes: 2

Views: 60

Answers (3)

Alexandr_TT
Alexandr_TT

Reputation: 14575

It is better to add images to the svg fragment using thesvg tag <image>

There is no text in the SVG application that needs autotransfer, like HTML so there’s no need to use<foreignObject>

The images have different sizes, so we take the image of the smartphone as the basis, and the image with the text will fit in size to the first image.

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

The application works adaptively in all modern browsers.

Upvotes: 1

Mark Schultheiss
Mark Schultheiss

Reputation: 34227

Adjust the CSS, remove some and simplify some should fix this.

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>

Upvotes: 0

vals
vals

Reputation: 64244

Your images are 2688x1242, and 1792x828. This gives a ratio of 2.1642.

On the other side, in the foregroundBox, you set the dimensions to 2540x1090, that has a ratio of 2.33

Then, the object-fit: contain will force a resize because the ratio doesn't fit.

You need to change the foregroundBox dimensions to something with the same ratio as the image, and everything will be fine

Upvotes: 2

Related Questions