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.

Answer 1

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.

Answer 2

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, ie 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 (ie 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.

Answer 3

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>