Display the half image to cover entire Background image

Question

1) Requirement :

I am trying to cut the image which is present on below mug into exactly 2 equal parts and display half of image in one part of mug and another half in another part of mug

Original image [ say Image 1 ]

Front & Back side of Mug : [ Image 2 & Image 3 ]

2) My work

I displayed Image1 on Image 2 and used clip: rect code to display Image 1 on Image 3 with help of code in fiddle 1 : https://jsfiddle.net/t0b351gh/4/

Next step is to cut the Image present on Mug into exact equal parts and display in both sides of mug. so i tried fiddle2 : https://jsfiddle.net/x2gjL7wj/6/

3) Issue :

Now Those half images are not covering the entire part of Mug, means those images used only half part of the mug, but i want to cover those half images to entire mug as below.

Why do you make the extra step of getting your texture in an useless image ? Can't you have it separately ? — Kaiido, Jun 23 '17 at 05:45
@Kaiido Thanks for reply.... client want to display the `half of the user uploaded image` in front of coffe mug & another half of user image in `back of coffe mug`...... — , Jun 23 '17 at 05:46
Yes I got it, but why are you using user uploaded image inside an [holed mug image](https://i.stack.imgur.com/0K9jH.png) ? Why don't you use directly the user's image ? — Kaiido, Jun 23 '17 at 05:55
@Kaiido we are not saving the `image alone that uploaded by user` , we are saving the `user image uploaded on mug` due to some reason , we are't saving the user image alone, is there any way to find solution for this case ? — , Jun 23 '17 at 05:58
Also, for a true 3d wrap, reference this thread: https://stackoverflow.com/questions/40997344/wrap-an-image-around-a-cylindrical-object-in-html5-javascript — Jerry Lee, Jun 26 '17 at 19:07

score 0 · Answer 1 · answered Jun 22 '17 at 15:14

0

You can use scale() to make the images (#simple1 and #simple2) twice as big; try this:

#simple1,
#simple2 {
  transform: scale(2);
}

Then you'll need to adjust their position.

answered Jun 22 '17 at 15:14

Thierry Koblentz

36
3

I tried your solution as https://jsfiddle.net/x2gjL7wj/9/ , but seems images are losing its quality... is there any option to cover the whole mug with same image quality..... – Jun 23 '17 at 05:34
No, not really, unless you use larger images (and shrink them when you need them to be shown small) – strah Jun 23 '17 at 14:38

Raad · Accepted Answer · 2017-06-29T13:20:31.187

So there are a few things that constrain how well this can work:

The image printed on the mug is actually part of a larger image, so cutting it up using 'clip' is not guaranteed to give consistent results unless the image is exactly the same size and is in exactly the same place for different designs
The same applies for the 2 halves of the print image, i.e. where the split is
It is not possible use CSS to map the print image onto the mug so that it follows the curves of the mug , as shown in your last picture

Having said that, it is possible to get a close approximation of your ideal, using CSS clip and transform scale:

.parent {
  float: left;
  margin: 0;
  padding: 0;
}

.whiteimg {
  position: relative;
  top: 0;
  left: 0;
  margin: 0;
  padding: 0;
}

.parent1 .whiteimg {
  margin-left: -27px;
}

#simple1,
#simple2 {
  position: absolute;
  top: 12px;
}

#simple1 {
  clip: rect(36px, 96px, 124px, 57px);
  left: 21px;
  transform: scale(2.25, 2.3);
}

#simple2 {
  clip: rect(36px, 134px, 122px, 95px);
  left: 26px;
  transform: scale(2.2, 2.3);
}

<div class="parent">

  <img class="whiteimg" src='https://i.stack.imgur.com/DjZm0.png' height="150" width="150">
  <img id="simple1" height="150" width="150" src='https://i.stack.imgur.com/0K9jH.png'>

</div>

<div class="parent1 ">

  <img class="whiteimg" src='https://i.stack.imgur.com/KWmCC.png' height="150" width="150">
  <div class="parent5">
    <img id="simple2" height="150" width="150" src='https://i.stack.imgur.com/0K9jH.png'>
  </div>

</div>


<div>
  <img src="https://i.stack.imgur.com/4AaoH.png" alt="enter image description here" style="width: 250px; margin-left: 15px;">
</div>

UPDATE:

Just to repeat one of the points above:

The image being clipped needs to have fixed dimensions and the clip coordinates need to be the same in each case, because the clip + scale solution will not work properly if the clip region and size varies.

One additional point:

In order to fix the clipped image within the picture of the mug, we scale the clipped image. If the aspect ratio of the left/right part of the image does not match the aspect ratio of the side of the mug, then either:

we make it fit by scaling height/width unequally (i.e. breaking the aspect ratio)

or

we preserve the aspect ratio and scale up as far as it will fit either the width or the height

'object-fit: cover;' cannot be used here to fit the clipped image to the side of the mug because we are scaling it instead. See https://codepen.io/raad/pen/awqoVN - I am still using the same technique, but because the image dimensions are different, I have had to adjust the clipping, scaling, and offsets.

thanks , I used your code, but after used `transform` , images are streching..... is there any solution for this ? — , Jun 28 '17 at 06:37
here is codepen : https://codepen.io/anon/pen/rwpjMw , i used `object-fit: cover;` to make not to stretch, but when i decrease the height of the `car` image which is present on mug, than it will decrease the width also, can you please help me to reduce the height without decrease the width of the image..... — , Jun 28 '17 at 13:43

Mohamed Mohaideen AH · Answer 3 · 2017-06-29T10:32:42.157

Here is the solution. Using some absolute position & background-size property we can achieve like that.

.clip {
    background: url("https://i.stack.imgur.com/CsblL.jpg");
    position:absolute;
    background-repeat: no-repeat;
    background-size: 400px 230px;
    padding-left: 140px;
    padding-top: 50px;
    border:none;
    clip: rect(50px,274px,198px,142px);
    left:-60px;
}

<div>
 <img src="https://i.stack.imgur.com/SIZYv.jpg" width="230"  height="230" />
 <img class="clip" width="150" height="150" />
</div>

Display the half image to cover entire Background image

3 Answers3

UPDATE: