Question

1）要求：

我正在尝试将位于杯子下方的图像切成2个相等的部分，并在杯子的一部分中显示一半图像，在另一部分杯子中显示另一半图像

原始图片 [说图片1]

前线＆amp;马克杯的背面：[图片2＆amp;图3]

2）我的工作

我显示Image1 on Image 2并使用clip: rect代码在小提琴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

因此，有一些因素限制了它的运作效果：

印在杯子上的图像实际上是较大图像的一部分，因此使用“剪辑”剪切图像。除非图像尺寸完全相同且不同设计的图像完全相同，否则不能保证给出一致的结果
这同样适用于打印图像的两半，即分割为
无法使用CSS将打印图像映射到马克杯上，使其跟随马克杯的曲线，如上一张图片所示

话虽如此，使用CSS剪辑和变换比例可以近似理想：

＆＃13;

.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);
}

＆＃13;

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

＆＃13;

UPDATE：

重复上述一点：

被剪裁的图像需要具有固定的尺寸，剪辑坐标在每种情况下都需要相同，因为如果剪辑区域和尺寸不同，剪辑+比例解决方案将无法正常工作。

还有一点：

为了将剪裁的图像固定在马克杯的图片中，我们缩放剪裁的图像。如果图像左/右部分的纵横比与马克杯侧面的纵横比不匹配，则可以：

我们通过不均衡地缩放高度/宽度（即打破纵横比）使其适合

或

我们保留宽高比并按比例放大宽度或高度

＆＃39;对象：封面;＆＃39;不能在这里使用剪裁的图像到杯子的侧面，因为我们正在缩放它。请参阅https://codepen.io/raad/pen/awqoVN - 我仍在使用相同的技术，但由于图像尺寸不同，我不得不调整剪裁，缩放和偏移。

Answer 3

这是解决方案。使用一些绝对位置＆amp;我们可以实现这样的背景大小属性。

＆＃13;

Asia/Calcutta

＆＃13;

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

＆＃13;

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

3 个答案:

UPDATE：