[英]Display the half image to cover entire Background image
1) Requirement : 1)要求 :
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 ] 原始图片 [说图片1]
Front & Back side of Mug : [ Image 2 & Image 3 ] 杯子的正面和背面 :[图片2和图片3]
2) My work 2)我的工作
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/ 我
Image1 on Image 2
显示了Image1 on Image 2
并使用了clip: rect
代码借助小提琴1中的代码在Image 1 on Image 3
显示Image 1 on Image 3
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/
所以我尝试了fiddle2 : https : //jsfiddle.net/x2gjL7wj/6/
3) Issue : 3)问题 :
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. 现在,那些一半的图像并没有覆盖整个杯子的一部分,这意味着这些图像仅使用了杯子的一半,但是我想将那些一半的图像覆盖到整个杯子,如下所示。
You can use scale()
to make the images ( #simple1
and #simple2
) twice as big; 您可以使用
scale()
使图像( #simple1
和#simple2
)变大两倍; try this: 尝试这个:
#simple1,
#simple2 {
transform: scale(2);
}
Then you'll need to adjust their position. 然后,您需要调整其位置。
So there are a few things that constrain how well this can work: 因此,有些事情限制了它的工作效果:
Having said that, it is possible to get a close approximation of your ideal, using CSS clip and transform scale: 话虽如此,使用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>
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:
如果图像左/右部分的纵横比与杯子侧面的纵横比不匹配,则:
or 要么
'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.
参见https://codepen.io/raad/pen/awqoVN-我仍在使用相同的技术,但是由于图像尺寸不同,我不得不调整裁剪,缩放和偏移。
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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.