如何在不泄漏帧的情况下渲染帧图像内的屏幕截图/图像？
使用div或canvas，目标是用图像/屏幕截图完全填充设备框架，但不会渗漏到框架之外。
屏幕截图1展示了紧贴框架内的图像。屏幕截图2展示了图像流过框架的情况。
第一个挑战是图像/屏幕截图的宽高比可能会有所不同，即可能会使用不同尺寸的图像。例如，一个图像可以是1242x2688，而另一图像可以是1440x2960。无论宽高比如何，屏幕截图都应填充框架，但不要流过其边缘。
第二个挑战是它们在CSS中的缩放比例通常为transform: scale(x)到〜25％，浏览器的舍入行为会在此比例下产生像素大小的间隙。但是，当比例恢复到100％时，这些差距就会消失。
我们尝试了两种选择。两者都有缺陷。
都将图像/屏幕截图作为帧div的子div。
选项1：填充值
我们使用“填充”值来调整子div的宽度，高度和位置（即屏幕截图），以使其适合其父框架。但是，具有不同长宽比的图像可能会流过框架或无法填满框架。
选项2：剪切路径
我们使用剪切路径来表示框架内的区域，但是有时会出现间隙，具体取决于CSS比例尺值。我们不能允许差距。
下面的代码和Codepen中说明了间隙问题。
还有其他选择吗？
Codepen（说明差距）：https://codepen.io/anon/pen/yWXvJE
.colorClassProxy {
display: none
}
.itemBox, .itemBox > * {
position: absolute;
box-sizing: border-box;
}
.backgroundColorBox, .backgroundGraphicBox, .foregroundBox, .frameBox {
width: 100%;
height: 100%;
background-size: contain;
background-color: transparent;
background-position: center;
background-repeat: no-repeat;
pointer-events: none;
}<div class="itemBox graphic" id="NZW2Hmn4nVgb" style="width: 173px; height: 364px; top: 86px; left: 111px;"><div class="backgroundColorBox" style="width: 163px; height: 335px; top: 17px; left: 4px; -webkit-mask-image: url("data:image/svg+xml;charset=utf8,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%2241.7%20142.4%201445.2%202965.9%22%20preserveAspectRatio=%22none%22%3E%3Cpath%20d=%22M1359.3,3105.3h-1190c-68.8,0-124.6-53.2-124.6-118.9V264.3c0-65.7,55.8-118.9,124.6-118.9h1190%20%20c68.8,0,124.6,53.3,124.6,118.9l0,2722.1C1484,3052.1,1428.2,3105.4,1359.3,3105.3L1359.3,3105.3z%22%20style=%22fill:%20white;%20stroke:%20white;%20stroke-width:%206;%22/%3E%3C/svg%3E"); background-size: cover;"></div><div class="backgroundGraphicBox" style="width: 163px; height: 335px; top: 17px; left: 4px; -webkit-mask-image: url("data:image/svg+xml;charset=utf8,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%2241.7%20142.4%201445.2%202965.9%22%20preserveAspectRatio=%22none%22%3E%3Cpath%20d=%22M1359.3,3105.3h-1190c-68.8,0-124.6-53.2-124.6-118.9V264.3c0-65.7,55.8-118.9,124.6-118.9h1190%20%20c68.8,0,124.6,53.3,124.6,118.9l0,2722.1C1484,3052.1,1428.2,3105.4,1359.3,3105.3L1359.3,3105.3z%22%20style=%22fill:%20white;%20stroke:%20white;%20stroke-width:%206;%22/%3E%3C/svg%3E"); background-size: cover;"></div><div class="foregroundBox" style="width: 163px;height: 335px;top: 17px;left: 4px;-webkit-mask-image: url("data:image/svg+xml;charset=utf8,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%2241.7%20142.4%201445.2%202965.9%22%20preserveAspectRatio=%22none%22%3E%3Cpath%20d=%22M1359.3,3105.3h-1190c-68.8,0-124.6-53.2-124.6-118.9V264.3c0-65.7,55.8-118.9,124.6-118.9h1190%20%20c68.8,0,124.6,53.3,124.6,118.9l0,2722.1C1484,3052.1,1428.2,3105.4,1359.3,3105.3L1359.3,3105.3z%22%20style=%22fill:%20white;%20stroke:%20white;%20stroke-width:%206;%22/%3E%3C/svg%3E");background-size: cover;background-image: url(https://uce9d8d4a8a6c69a057e9a584674.dl.dropboxusercontent.com/cd/0/inline/AhH2Z_q_te_Yu3IKd2cdiB0XMhJEzRdO4KP686rb3VdE1hxeIamOskpIoAhrxKegUAxERpAIyX3g0VABD7EU5S4JWe9X_Q1zdaS2hsoD_SpI4w/file#);"></div><div class="frameBox" data-natural-width="1528.64" data-natural-height="3224.29" style="background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNTI4LjY0IiBoZWlnaHQ9IjMyMjQuMjkiIHZpZXdCb3g9IjAgMCAxNTI4LjY0IDMyMjQuMjkiIGRhdGEtaHAtY29sb3ItcHJlcGFyZWQ9InRydWUiIHN0eWxlPSItLWhwLWNvbG9yLTluYXo1Z0JWLTE6cmdiKDI1NSwgMjU1LCAyNTUpOyAtLWhwLWNvbG9yLTluYXo1Z0JWLTI6dXJsKFwjY29sb3ItOW5hejVnQlYtMik7Ij48cmFkaWFsR3JhZGllbnQgaWQ9ImNvbG9yLTluYXo1Z0JWLTIiIGRhdGEtY3NzPSJyYWRpYWwtZ3JhZGllbnQocmdiKDY3LCA2NywgNjcpLCByZ2IoMCwgMCwgMCkpIiBjeD0iNTAlIiBjeT0iNTAlIiByPSI3MC43MSUiPjxzdG9wIHN0b3AtY29sb3I9InJnYig2Nyw2Nyw2NykiIG9mZnNldD0iMCUiLz48c3RvcCBzdG9wLWNvbG9yPSJyZ2IoMCwwLDApIiBvZmZzZXQ9IjEwMCUiLz48L3JhZGlhbEdyYWRpZW50Pjx0aXRsZT5Bc3NldCAyPC90aXRsZT48cGF0aCBkPSJNODU3Ljc4LDcyLjY4SDY3MC44NmMtNy42NCwwLTEzLjg1LDUuOTEtMTMuODUsMTMuMjFzNi4yMSwxMy4yMSwxMy44NSwxMy4yMUg4NTcuNzhjNy42NiwwLDEzLjg1LTUuOTEsMTMuODUtMTMuMjFTODY1LjQ0LDcyLjY4LDg1Ny43OCw3Mi42OFoiIGZpbGw9IiNlOGVlZWYiIGZpbGwtcnVsZT0iZXZlbm9kZCIgc3R5bGU9ImZpbGw6IHZhcigtLWhwLWNvbG9yLTluYXo1Z0JWLTEpOyIvPjxwYXRoIGQ9Ik0xNTE0Ljc5LDc4Ni4yNlYxNjUuMTdDMTUxNC43OSw3My45NSwxNDM3LjI5LDAsMTM0MS43MiwwSDE4Ni45MkM5MS4zMywwLDEzLjg1LDczLjk1LDEzLjg1LDE2NS4xN1Y0NzUuNzFDNi4xOSw0NzUuNzEsMCw0ODEuNjIsMCw0ODguOTJWODU4LjkzYzAsNy4zLDYuMTksMTMuMjEsMTMuODUsMTMuMjF2MTMyLjE1QzYuMTksMTAwNC4yOSwwLDEwMTAuMiwwLDEwMTcuNXYxOTguMjFjMCw3LjMxLDYuMTksMTMuMjIsMTMuODUsMTMuMjJWMzA1OS4xYzAsOTEuMjMsNzcuNDgsMTY1LjE5LDE3My4wNywxNjUuMTloMTE1NC44Yzk1LjU3LDAsMTczLjA3LTczLjk2LDE3My4wNy0xNjUuMTlWMTAxNy41YzcuNjQsMCwxMy44NS01LjkxLDEzLjg1LTEzLjIxVjc5OS40N0MxNTI4LjY0LDc5Mi4xNywxNTIyLjQzLDc4Ni4yNiwxNTE0Ljc5LDc4Ni4yNlpNNjcwLjg2LDcyLjY4SDg1Ny43OGM3LjY2LDAsMTMuODUsNS45MSwxMy44NSwxMy4yMVM4NjUuNDQsOTkuMSw4NTcuNzgsOTkuMUg2NzAuODZjLTcuNjQsMC0xMy44NS01LjkxLTEzLjg1LTEzLjIxUzY2My4yMiw3Mi42OCw2NzAuODYsNzIuNjhabTY4OC40OCwzMDMyLjY3SDE2OS4zMmMtNjguODQsMC0xMjQuNjEtNTMuMjQtMTI0LjYxLTExOC45M1YyNjQuMjljMC02NS42OSw1NS43Ny0xMTguOTQsMTI0LjYxLTExOC45NEgxMzU5LjM0YzY4LjgxLDAsMTI0LjYxLDUzLjI1LDEyNC42MSwxMTguOTRsLjAxLDI3MjIuMTNDMTQ4My45NiwzMDUyLjExLDE0MjguMTYsMzEwNS4zNSwxMzU5LjM0LDMxMDUuMzVaIiBmaWxsPSIjZmZmIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiIHN0eWxlPSJmaWxsOiB2YXIoLS1ocC1jb2xvci05bmF6NWdCVi0yKTsiLz48L3N2Zz4=);" data-inner-natural-left="41.7" data-inner-natural-top="142.4" data-inner-natural-width="1445.2" data-inner-natural-height="2965.9"><iframe class="colorClassProxy"></iframe></div></div>
4 个答案:
答案 0 :(得分：6)
其他答案
在提供自己的方法以供参考之前，我将首先讨论Ron Royston 的答案，并说明可能出现的问题/碰壁。
Ron Royston's answer
您已经指出了这种方法的问题：
这不起作用，因为如果框架具有这样的圆角，则屏幕快照仍可以根据背景大小窥视
kthornbloom提供了一种可能的解决方案：
因此，如果图像元素需要圆角，请向图像元素中添加
border-radius，对吗？
对！但这仅适用于某些图像。瞧，您不能仅将border-radius应用于background-image。相反，您必须对容器本身执行此操作。
那么，这是什么问题？只需添加足够小的border-radius，这样就不会剪切图像，缩小background-image，就可以开始了，对吧？
不是真的！，您必须决定如何处理背景图片的大小。您可以缩小比例，但不能使用cover或类似background-size的东西。除非您的图像完全适合智能手机图像的边框，否则您将遇到麻烦。另外，如果您缩小背景图像，border-radius将会过时，因为它不再接触边界。
.colorClassProxy {
display: none
}
.itemBox,
.itemBox>* {
position: absolute;
box-sizing: border-box;
}
.itemBox {
background-image: url('https://images.unsplash.com/photo-1500382017468-9049fed747ef?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&w=1000&q=80');
border-radius: 15px;
background-size: 95% 95%;
background-repeat: no-repeat;
background-position: center;
}
.backgroundColorBox,
.backgroundGraphicBox,
.foregroundBox,
.frameBox {
width: 100%;
height: 100%;
background-size: contain;
background-color: transparent;
background-position: center;
background-repeat: no-repeat;
pointer-events: none;<div class="itemBox graphic" id="NZW2Hmn4nVgb" style="width: 173px; height: 364px; top: 86px; left: 111px;">
<div class="backgroundColorBox" style="width: 163px; height: 335px; top: 17px; left: 4px; -webkit-mask-image: url("data:image/svg+xml;charset=utf8,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%2241.7%20142.4%201445.2%202965.9%22%20preserveAspectRatio=%22none%22%3E%3Cpath%20d=%22M1359.3,3105.3h-1190c-68.8,0-124.6-53.2-124.6-118.9V264.3c0-65.7,55.8-118.9,124.6-118.9h1190%20%20c68.8,0,124.6,53.3,124.6,118.9l0,2722.1C1484,3052.1,1428.2,3105.4,1359.3,3105.3L1359.3,3105.3z%22%20style=%22fill:%20white;%20stroke:%20white;%20stroke-width:%206;%22/%3E%3C/svg%3E"); background-size: cover;"></div>
<div class="frameBox" data-natural-width="1528.64" data-natural-height="3224.29" style="background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNTI4LjY0IiBoZWlnaHQ9IjMyMjQuMjkiIHZpZXdCb3g9IjAgMCAxNTI4LjY0IDMyMjQuMjkiIGRhdGEtaHAtY29sb3ItcHJlcGFyZWQ9InRydWUiIHN0eWxlPSItLWhwLWNvbG9yLTluYXo1Z0JWLTE6cmdiKDI1NSwgMjU1LCAyNTUpOyAtLWhwLWNvbG9yLTluYXo1Z0JWLTI6dXJsKFwjY29sb3ItOW5hejVnQlYtMik7Ij48cmFkaWFsR3JhZGllbnQgaWQ9ImNvbG9yLTluYXo1Z0JWLTIiIGRhdGEtY3NzPSJyYWRpYWwtZ3JhZGllbnQocmdiKDY3LCA2NywgNjcpLCByZ2IoMCwgMCwgMCkpIiBjeD0iNTAlIiBjeT0iNTAlIiByPSI3MC43MSUiPjxzdG9wIHN0b3AtY29sb3I9InJnYig2Nyw2Nyw2NykiIG9mZnNldD0iMCUiLz48c3RvcCBzdG9wLWNvbG9yPSJyZ2IoMCwwLDApIiBvZmZzZXQ9IjEwMCUiLz48L3JhZGlhbEdyYWRpZW50Pjx0aXRsZT5Bc3NldCAyPC90aXRsZT48cGF0aCBkPSJNODU3Ljc4LDcyLjY4SDY3MC44NmMtNy42NCwwLTEzLjg1LDUuOTEtMTMuODUsMTMuMjFzNi4yMSwxMy4yMSwxMy44NSwxMy4yMUg4NTcuNzhjNy42NiwwLDEzLjg1LTUuOTEsMTMuODUtMTMuMjFTODY1LjQ0LDcyLjY4LDg1Ny43OCw3Mi42OFoiIGZpbGw9IiNlOGVlZWYiIGZpbGwtcnVsZT0iZXZlbm9kZCIgc3R5bGU9ImZpbGw6IHZhcigtLWhwLWNvbG9yLTluYXo1Z0JWLTEpOyIvPjxwYXRoIGQ9Ik0xNTE0Ljc5LDc4Ni4yNlYxNjUuMTdDMTUxNC43OSw3My45NSwxNDM3LjI5LDAsMTM0MS43MiwwSDE4Ni45MkM5MS4zMywwLDEzLjg1LDczLjk1LDEzLjg1LDE2NS4xN1Y0NzUuNzFDNi4xOSw0NzUuNzEsMCw0ODEuNjIsMCw0ODguOTJWODU4LjkzYzAsNy4zLDYuMTksMTMuMjEsMTMuODUsMTMuMjF2MTMyLjE1QzYuMTksMTAwNC4yOSwwLDEwMTAuMiwwLDEwMTcuNXYxOTguMjFjMCw3LjMxLDYuMTksMTMuMjIsMTMuODUsMTMuMjJWMzA1OS4xYzAsOTEuMjMsNzcuNDgsMTY1LjE5LDE3My4wNywxNjUuMTloMTE1NC44Yzk1LjU3LDAsMTczLjA3LTczLjk2LDE3My4wNy0xNjUuMTlWMTAxNy41YzcuNjQsMCwxMy44NS01LjkxLDEzLjg1LTEzLjIxVjc5OS40N0MxNTI4LjY0LDc5Mi4xNywxNTIyLjQzLDc4Ni4yNiwxNTE0Ljc5LDc4Ni4yNlpNNjcwLjg2LDcyLjY4SDg1Ny43OGM3LjY2LDAsMTMuODUsNS45MSwxMy44NSwxMy4yMVM4NjUuNDQsOTkuMSw4NTcuNzgsOTkuMUg2NzAuODZjLTcuNjQsMC0xMy44NS01LjkxLTEzLjg1LTEzLjIxUzY2My4yMiw3Mi42OCw2NzAuODYsNzIuNjhabTY4OC40OCwzMDMyLjY3SDE2OS4zMmMtNjguODQsMC0xMjQuNjEtNTMuMjQtMTI0LjYxLTExOC45M1YyNjQuMjljMC02NS42OSw1NS43Ny0xMTguOTQsMTI0LjYxLTExOC45NEgxMzU5LjM0YzY4LjgxLDAsMTI0LjYxLDUzLjI1LDEyNC42MSwxMTguOTRsLjAxLDI3MjIuMTNDMTQ4My45NiwzMDUyLjExLDE0MjguMTYsMzEwNS4zNSwxMzU5LjM0LDMxMDUuMzVaIiBmaWxsPSIjZmZmIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiIHN0eWxlPSJmaWxsOiB2YXIoLS1ocC1jb2xvci05bmF6NWdCVi0yKTsiLz48L3N2Zz4=);"
data-inner-natural-left="41.7" data-inner-natural-top="142.4" data-inner-natural-width="1445.2" data-inner-natural-height="2965.9"><iframe class="colorClassProxy"></iframe></div>
</div>
看起来不好吗？
但是，这种方法在某些情况下有效。如果智能手机的轮廓侧面没有任何按钮（像这样），这种方法将起作用。但是我想不出侧面没有按钮的智能手机。
Никита Гулис's answer（正在工作）
由于缺少标记，因此此答案很难阅读。但是，大部分是正确的，也是大多数情况下的最佳选择。实际上，您几乎可以自己使用剪切路径来完成它。但是首先让我们做这些步骤。
- 创建图像并将其放置在容器内。
- 将其缩小到合适的大小。
- 正确定位。
- 删除剪切路径，因为这是不必要的。
/*====Added this part====*/
.display-image {
width: 165px;
height: 340px;
display: block;
background-image: url('https://images.unsplash.com/photo-1500382017468-9049fed747ef?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&w=1000&q=80"');
background-size: cover;
margin-top: 15px;
margin-left: 5px;
border-radius: 10px;
}
/*=======================*/
.colorClassProxy {
display: none
}
.itemBox,
.itemBox>* {
position: absolute;
box-sizing: border-box;
}
.backgroundColorBox,
.backgroundGraphicBox,
.foregroundBox,
.frameBox {
width: 100%;
height: 100%;
background-size: contain;
background-color: transparent;
background-position: center;
background-repeat: no-repeat;
pointer-events: none;<div class="itemBox graphic" id="NZW2Hmn4nVgb" style="width: 173px; height: 364px; top: 86px; left: 111px;">
<!--====Added this line====-->
<div class="display-image" alt=""></div>
<!--=======================-->
<!--====Removed the clipping path====-->
<div class="frameBox" data-natural-width="1528.64" data-natural-height="3224.29" style="background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNTI4LjY0IiBoZWlnaHQ9IjMyMjQuMjkiIHZpZXdCb3g9IjAgMCAxNTI4LjY0IDMyMjQuMjkiIGRhdGEtaHAtY29sb3ItcHJlcGFyZWQ9InRydWUiIHN0eWxlPSItLWhwLWNvbG9yLTluYXo1Z0JWLTE6cmdiKDI1NSwgMjU1LCAyNTUpOyAtLWhwLWNvbG9yLTluYXo1Z0JWLTI6dXJsKFwjY29sb3ItOW5hejVnQlYtMik7Ij48cmFkaWFsR3JhZGllbnQgaWQ9ImNvbG9yLTluYXo1Z0JWLTIiIGRhdGEtY3NzPSJyYWRpYWwtZ3JhZGllbnQocmdiKDY3LCA2NywgNjcpLCByZ2IoMCwgMCwgMCkpIiBjeD0iNTAlIiBjeT0iNTAlIiByPSI3MC43MSUiPjxzdG9wIHN0b3AtY29sb3I9InJnYig2Nyw2Nyw2NykiIG9mZnNldD0iMCUiLz48c3RvcCBzdG9wLWNvbG9yPSJyZ2IoMCwwLDApIiBvZmZzZXQ9IjEwMCUiLz48L3JhZGlhbEdyYWRpZW50Pjx0aXRsZT5Bc3NldCAyPC90aXRsZT48cGF0aCBkPSJNODU3Ljc4LDcyLjY4SDY3MC44NmMtNy42NCwwLTEzLjg1LDUuOTEtMTMuODUsMTMuMjFzNi4yMSwxMy4yMSwxMy44NSwxMy4yMUg4NTcuNzhjNy42NiwwLDEzLjg1LTUuOTEsMTMuODUtMTMuMjFTODY1LjQ0LDcyLjY4LDg1Ny43OCw3Mi42OFoiIGZpbGw9IiNlOGVlZWYiIGZpbGwtcnVsZT0iZXZlbm9kZCIgc3R5bGU9ImZpbGw6IHZhcigtLWhwLWNvbG9yLTluYXo1Z0JWLTEpOyIvPjxwYXRoIGQ9Ik0xNTE0Ljc5LDc4Ni4yNlYxNjUuMTdDMTUxNC43OSw3My45NSwxNDM3LjI5LDAsMTM0MS43MiwwSDE4Ni45MkM5MS4zMywwLDEzLjg1LDczLjk1LDEzLjg1LDE2NS4xN1Y0NzUuNzFDNi4xOSw0NzUuNzEsMCw0ODEuNjIsMCw0ODguOTJWODU4LjkzYzAsNy4zLDYuMTksMTMuMjEsMTMuODUsMTMuMjF2MTMyLjE1QzYuMTksMTAwNC4yOSwwLDEwMTAuMiwwLDEwMTcuNXYxOTguMjFjMCw3LjMxLDYuMTksMTMuMjIsMTMuODUsMTMuMjJWMzA1OS4xYzAsOTEuMjMsNzcuNDgsMTY1LjE5LDE3My4wNywxNjUuMTloMTE1NC44Yzk1LjU3LDAsMTczLjA3LTczLjk2LDE3My4wNy0xNjUuMTlWMTAxNy41YzcuNjQsMCwxMy44NS01LjkxLDEzLjg1LTEzLjIxVjc5OS40N0MxNTI4LjY0LDc5Mi4xNywxNTIyLjQzLDc4Ni4yNiwxNTE0Ljc5LDc4Ni4yNlpNNjcwLjg2LDcyLjY4SDg1Ny43OGM3LjY2LDAsMTMuODUsNS45MSwxMy44NSwxMy4yMVM4NjUuNDQsOTkuMSw4NTcuNzgsOTkuMUg2NzAuODZjLTcuNjQsMC0xMy44NS01LjkxLTEzLjg1LTEzLjIxUzY2My4yMiw3Mi42OCw2NzAuODYsNzIuNjhabTY4OC40OCwzMDMyLjY3SDE2OS4zMmMtNjguODQsMC0xMjQuNjEtNTMuMjQtMTI0LjYxLTExOC45M1YyNjQuMjljMC02NS42OSw1NS43Ny0xMTguOTQsMTI0LjYxLTExOC45NEgxMzU5LjM0YzY4LjgxLDAsMTI0LjYxLDUzLjI1LDEyNC42MSwxMTguOTRsLjAxLDI3MjIuMTNDMTQ4My45NiwzMDUyLjExLDE0MjguMTYsMzEwNS4zNSwxMzU5LjM0LDMxMDUuMzVaIiBmaWxsPSIjZmZmIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiIHN0eWxlPSJmaWxsOiB2YXIoLS1ocC1jb2xvci05bmF6NWdCVi0yKTsiLz48L3N2Zz4=);"
data-inner-natural-left="41.7" data-inner-natural-top="142.4" data-inner-natural-width="1445.2" data-inner-natural-height="2965.9"><iframe class="colorClassProxy"></iframe></div>
</div>
简短注释：他提供的参考文献实际上并不代表他所写的内容。
我查看了您打开赏金的原因：
寻找可靠和/或官方来源的答案。
您可以在每个使用图像作为智能手机的网站上看到它。
- here对堆栈溢出进行了一次讨论。
- 我使用“网站到应用”转换器创建了一个测试应用。在此网站上，您可以测试该应用程序，并且他们使用相同的方法。唯一的区别是它们不能以图像作为显示。相反，他们使用画布。遗憾的是，我无法在答案中实现它，因此我不得不发布the link。
- 在this网站上也可以看到相同的内容。
我提供的示例都是相当大的公司，如果您搜索更多示例，您会发现更多示例。我认为这些示例使这种方法可信。
编辑
根据评论，我将完成答案。
这取决于您可以编辑图片的数量。我假设您拥有图片或被允许使用它们。这是一种方法：
首先，我想我可以将其定位并缩放图像。事实证明，图像中的智能手机已略微转动。因此，一种方法是为此使用CSS。您将必须使用skew()（CSS），但这很难，很难。另外，如果仅将其放在图像上，则会遇到与剪切路径相同的问题。因此，这似乎不是解决方案。
另一种方法如下：
只需将其转换为PNG（便携式网络图形）并切出白色显示以使其透明即可。
- 将所需的图像显示在显示屏的下方
z-index。 - 定位并缩放比例。
但是，这只是大约。您当然可以只skew和transform图像，直到没人注意到为止。但这似乎不是“最清晰”的方法吗？
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
.display-image {
width: 184px;
height: 322px;
display: block;
background-image: url('https://images.unsplash.com/photo-1500382017468-9049fed747ef?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&w=1000&q=80"');
background-size: cover;
top: 165px;
left: 219px;
position: absolute;
transform: rotate(0.2deg);
z-index: -1;
}
.itemBox {
position: relative;
box-sizing: border-box;
}
.frameBox {
z-index: 1;
}<div class="itemBox graphic" id="NZW2Hmn4nVgb" style="width: 173px; height: 364px; top: 86px; left: 111px;">
<!--====Added this line====-->
<div class="display-image" alt=""></div>
<!--=======================-->
<!--====Removed the clipping path====-->
<div class="frameBox"><img alt="" src="https://i.imgur.com/jbHkPuf.png"></div>
</div>
我能想到的唯一干净的方法是使用canvas。如您所见here，可以根据自己的喜好扭曲图像。您将必须在canvas中绘制整个“手中的智能手机”图片，然后在所需坐标上绘制应该在显示器上显示的图像。但是，您必须决定是否值得花时间，因为它既费时又复杂，并且代码很多。我认为不是，这就是为什么没有有效的例子。另外，您不能只使用background-size: cover之类的东西，因此，如果您不想写一大堆JS，就必须将图像切成智能手机大小。我认为，在此之前的方法是最好的方法。
我当然可以忽略一些东西，所以可以随时纠正我或编辑我的答案。
答案 1 :(得分：2)
您可以在框架后创建一个div，将其缩小一点，以便边框位于手机边框的内部。 然后绕过div的角落并给它溢出：隐藏； 然后将图像放置在内部，使其高度和宽度为100％，并设置object-fit：cover; 这是我的网站之一，效果相似，因此您可以参考。 reference（在中到大屏幕上都可以看到电话）
答案 2 :(得分：2)
我认为最简单的方法是将图像用作CSS background-image，然后使用background-size的{{1}}或contain。
background-size CSS属性可以调整宽度 和背景图片的高度，从而覆盖默认行为 以全尺寸平铺背景图像。您可以缩放 图像按需要向上或向下。
答案 3 :(得分：2)
最简单的解决方案
使用黑屏和剪贴蒙版的手机。没有明显的差距，您将获得非常干净的代码。您可以使用background-size: cover或100% 100%来“覆盖”或“拉伸适合”图像。
所以要清楚...各层看起来像这样：
- 第1层具有显示电话的背景图像。手机的屏幕截图应为黑色实心区域。下图以蓝色边框显示了该层。
- 第2层的背景图片显示了屏幕截图。此屏幕截图由屏幕（SVG）like this的确切形状中的剪切蒙版剪切。下图以红色边框显示了该层。
第1层-黑屏手机
在这里您看到带有黑屏和透明背景的手机/图像。
第2层-带有剪贴蒙版的屏幕截图
请注意，透明性是由剪贴蒙版和/或边框半径引起的。屏幕截图本身并不透明（只是一个简单的矩形JPG）。另外请注意，您应该修剪SVG中的空白区域，以便更轻松地放置此图层。
代码
使用以下简单的HTML：
<div class='layer 1'>
<div class='layer2'></div>
</div>
<svg width="0" height="0">
<defs>
<clipPath id="myClip">
... [add the complex clip path definition here]
</clipPath>
</defs>
</svg>
还有一些CSS：
.layer1 {
position: relative;
width: 500px;
padding-bottom: 150%;
background: url(phone.png) center center / contain no-repeat;
/*border: 1px solid blue;*/
}
.layer2 {
position: absolute;
width: 470px;
top: 40px;
left: 15px;
padding-bottom: 150%;
background: url(screenshot.jpg) center center / 100% 100% no-repeat;
border-radius: 30px;
clip-path: url(#myClip);
/*border: 1px solid red;*/
}
将100% 100%更改为cover或调整百分比。当您将其更改为覆盖时，应确保修剪了该图层中的所有空白区域，因此红线中留有矩形。请注意，任何旋转或变换都应添加到外部元素（第1层）上。
浏览器支持
人们似乎担心过时的不符合标准的浏览器。我明白了，但是我使用了嵌入式SVG，目前所有主要浏览器都支持该功能。仅IE11，Edge18，Opera Mini，Blackberry和IE Mobile不支持此功能。如果浏览器不支持内嵌SVG的clip-path，则将获得相同的结果，但没有缺口。对我来说似乎合理，因为这个问题每天都在变小。
相关问题
最新问题
- 我写了这段代码，但我无法理解我的错误
- 我无法从一个代码实例的列表中删除 None 值，但我可以在另一个实例中。为什么它适用于一个细分市场而不适用于另一个细分市场？
- 是否有可能使 loadstring 不可能等于打印？卢阿
- java中的random.expovariate()
- Appscript 通过会议在 Google 日历中发送电子邮件和创建活动
- 为什么我的 Onclick 箭头功能在 React 中不起作用？
- 在此代码中是否有使用“this”的替代方法？
- 在 SQL Server 和 PostgreSQL 上查询，我如何从第一个表获得第二个表的可视化
- 每千个数字得到
- 更新了城市边界 KML 文件的来源？