Search code examples
javascripthtmlcssimagebackground-image

Display the half image to cover entire Background image

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 ]

enter image description here

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

enter image description hereenter image description here

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/

enter image description here

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/

enter image description here

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.

enter image description here

Solution

  • 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.sstatic.net/DjZm0.png' height="150" width="150">
  <img id="simple1" height="150" width="150" src='https://i.sstatic.net/0K9jH.png'>

</div>

<div class="parent1 ">

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

</div>


<div>
  <img src="https://i.sstatic.net/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.