使用div或canvas的目标是用图像/屏幕截图完全填充设备框架，但又不会溢出框架。屏幕截图1展示了紧贴框架内的图像。屏幕截图2说明了图像渗漏到框架之外的情况。第一个挑战是图像/屏幕截图的宽高比可能会有所不同，即可能会使用不同尺寸的图像。例如，一个图像可能是1242x2688，而另一图像可能是1440x2960。无论宽高比如何，屏幕截图都应填充框架，但不会流过其边缘。第二个挑战是它们通常在CSS中的缩放比例transform: scale(x)约为25％，浏览器的舍入行为在此比例下会产生像素大小的间隙。但是，当比例恢复到100％时，这些差距将消失。我们尝试了两种选择。两者都有缺陷。两者都使图像/屏幕截图成为帧div的子div。选项1：填充值我们使用“ padding”值来调整子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:
添加回答
举报
0/150
提交
取消