显示半个图像以覆盖整个背景图像

Question

1) 要求：

我正在尝试将出现在下方马克杯上的图像恰好分成 2 个相等的部分，并在马克杯的一部分中显示一半图像，在马克杯的另一部分中显示另一半图像

原图[说图1]

马克杯的正面和背面：[图片 2 和图片 3]

2) 我的作品

我显示 Image1 on Image 2 并使用 clip: rect 代码在 fiddle 1 中的代码帮助下显示 Image 1 on Image 3 ：https://jsfiddle.net/t0b351gh/4/

下一步是将马克杯上的图像切割成完全相等的部分并显示在马克杯的两侧。所以我尝试了 fiddle2 : https://jsfiddle.net/x2gjL7wj/6/

3) 问题 :

现在那半张图片没有覆盖整个杯子，意思是那些图片只用了杯子的一半，但我想把那半张图片覆盖到整个杯子，如下所示。

Answer 1

您可以使用 scale() 将图像（#simple1 和 #simple2）放大两倍；试试这个：

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

然后你需要调整他们的位置。

Answer 2

所以有一些因素限制了它的效果：

印在马克杯上的图像实际上是一张较大图像的一部分，因此使用 'clip' 裁切它不能保证得到一致的结果，除非图像大小完全相同且位置完全相同不同设计的地方
这同样适用于打印图像的两半，即分割的地方
无法使用 CSS 将打印图像映射到马克杯上，使其跟随马克杯的曲线，如上一张图片所示

话虽如此，使用 CSS 裁剪和变换比例可以获得最接近您的理想的近似值：

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

更新：

重复以上几点：

被裁剪的图像需要具有固定的尺寸，并且裁剪坐标在每种情况下都需要相同，因为如果裁剪区域和大小发生变化，裁剪 + 缩放解决方案将无法正常工作。

加一分：

为了将裁剪图像固定在杯子图片内，我们对裁剪图像进行了缩放。如果图像 left/right 部分的纵横比与杯子侧面的纵横比不匹配，则：

我们通过 height/width 不等比例缩放（即打破纵横比）使其适合

或

我们保留纵横比并放大到适合宽度或高度的程度

此处不能使用

'object-fit: cover;' 来使剪裁的图像适合杯子的侧面，因为我们正在缩放它。请参阅 https://codepen.io/raad/pen/awqoVN - 我仍在使用相同的技术，但由于图像尺寸不同，我不得不调整裁剪、缩放和偏移。

Answer 3

这是解决方案。使用一些绝对位置和背景大小属性我们可以做到这一点。

.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

html

javascript

css

image

background-image

更新：