图像在所有 4 个面上都被截断
Posted
技术标签:
【中文标题】图像在所有 4 个面上都被截断【英文标题】：Image cut off on all 4 sides 【发布时间】：2021-09-26 17:42:09 【问题描述】：如何修复它以使整个图像可见？
您可以看到盒子阴影正在从图像的所有 4 个侧面切出。
有没有办法解决这个问题？
我提供的代码 sn-p 显示了我在这里描述的内容。
这就是我遇到的问题，有什么办法可以解决吗？
代码https://jsfiddle.net/m67vLeso/
.curtain
width: 550px;
height: 193px;
border-radius: 20px;
position: relative;
overflow: hidden;
background: white;
box-sizing: border-box;
.jacketa
position: absolute;
width: 180px;
height: 180px;
cursor: pointer;
border-radius: 50%;
background: #130e85;
border: 3px solid #f91f6e;
box-sizing: border-box;
box-shadow: 0 0 20px 2px #f9066bf7;
.jacketa .coversvg
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
margin: auto;
cursor: pointer;
.jacketa .coversvg
width: 70px;
height: 75.4px;
fill: none;
stroke-width: 4px;
stroke-miterlimit: 10;
.jacketa .coversvg .back
stroke: #000;
opacity: 0.15;
.jacketa .coversvg .front
stroke: #08f9ff;
stroke-dasharray: 150;
stroke-dashoffset: 1500;
animation: draw 20s infinite linear, flicker-1 2s linear 2s infinite both;
@keyframes draw
100%
stroke-dashoffset: 0;
100%
stroke-dashoffset: 0;
@keyframes flicker-1
0%,
100%
opacity: 1;
41.99%
opacity: 1;
42%
opacity: 0;
43%
opacity: 0;
43.01%
opacity: 1;
47.99%
opacity: 1;
48%
opacity: 0;
49%
opacity: 0;
49.01%
opacity: 1;
.split-wrap
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
width: 180px;
height: 180px;
margin: auto;
border-radius: 50%;
transition: 0.5s ease;
.j1
position: absolute;
left: 0;
top: 0;
width: 50%;
height: 100%;
overflow: hidden;
transition: 5s ease;
.j2
position: absolute;
left: 50%;
top: 0;
width: 50%;
height: 100%;
overflow: hidden;
transition: 5s ease;
.j2 .jacketa
right: 0;
left: auto;
.curtain:hover .j1
transform: translateX(-500%);
.curtain:hover .j2
transform: translateX(500%);
<div class="curtain">
<div class="split-wrap">
<div class="j1">
<div class="jacketa" title="[ Enjoy The Music ]">
<svg class="coversvg" viewBox="0 0 47.96 51.66">
<title>[ Enjoy The Music ]</title>
<path class="back" d="M2,25.83V4.11A2.11,2.11,0,0,1,5.13,2.27L44.88,24.45a2.11,2.11,0,0,1,0,3.7L5.1,49.41A2.11,2.11,0,0,1,2,47.55V25.83" />
<path class="front" d="M2,25.83V4.11A2.11,2.11,0,0,1,5.13,2.27L44.88,24.45a2.11,2.11,0,0,1,0,3.7L5.1,49.41A2.11,2.11,0,0,1,2,47.55V25.83" />
</svg>
</div>
</div>
<div class="j2">
<div class="jacketa" title="[ Enjoy The Music ]">
<svg class="coversvg" viewBox="0 0 47.96 51.66">
<title>[ Enjoy The Music ]</title>
<path class="back" d="M2,25.83V4.11A2.11,2.11,0,0,1,5.13,2.27L44.88,24.45a2.11,2.11,0,0,1,0,3.7L5.1,49.41A2.11,2.11,0,0,1,2,47.55V25.83" />
<path class="front" d="M2,25.83V4.11A2.11,2.11,0,0,1,5.13,2.27L44.88,24.45a2.11,2.11,0,0,1,0,3.7L5.1,49.41A2.11,2.11,0,0,1,2,47.55V25.83" />
</svg>
</div>
</div>
</div>
</div>【问题讨论】：
【参考方案1】：如果你使用overflow: hidden;，你应该为你的盒子阴影添加更多空间
.curtain
width: 550px;
height: 220px;
border-radius: 20px;
position: relative;
overflow: hidden;
background: white;
box-sizing: border-box;
.jacketa
position: absolute;
top: 20px;
left: 20px;
width: 180px;
height: 180px;
cursor: pointer;
border-radius: 50%;
background: #130e85;
border: 3px solid #f91f6e;
box-sizing: border-box;
box-shadow: 0 0 20px 2px #f9066bf7;
.jacketa .coversvg
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
margin: auto;
cursor: pointer;
.jacketa .coversvg
width: 70px;
height: 75.4px;
fill: none;
stroke-width: 4px;
stroke-miterlimit: 10;
.jacketa .coversvg .back
stroke: #000;
opacity: 0.15;
.jacketa .coversvg .front
stroke: #08f9ff;
stroke-dasharray: 150;
stroke-dashoffset: 1500;
animation: draw 20s infinite linear, flicker-1 2s linear 2s infinite both;
@keyframes draw
100%
stroke-dashoffset: 0;
100%
stroke-dashoffset: 0;
@keyframes flicker-1
0%,
100%
opacity: 1;
41.99%
opacity: 1;
42%
opacity: 0;
43%
opacity: 0;
43.01%
opacity: 1;
47.99%
opacity: 1;
48%
opacity: 0;
49%
opacity: 0;
49.01%
opacity: 1;
.split-wrap
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
width: 220px;
height: 220px;
margin: auto;
border-radius: 50%;
transition: 0.5s ease;
.j1
position: absolute;
left: 0;
top: 0;
width: 50%;
height: 100%;
overflow: hidden;
transition: 5s ease;
.j2
position: absolute;
left: 50%;
top: 0;
width: 50%;
height: 100%;
overflow: hidden;
transition: 5s ease;
.j2 .jacketa
right: 20px;
left: auto;
.curtain:hover .j1
transform: translateX(-500%);
.curtain:hover .j2
transform: translateX(500%);
<div class="curtain">
<div class="split-wrap">
<div class="j1">
<div class="jacketa" title="[ Enjoy The Music ]">
<svg class="coversvg" viewBox="0 0 47.96 51.66">
<title>[ Enjoy The Music ]</title>
<path class="back" d="M2,25.83V4.11A2.11,2.11,0,0,1,5.13,2.27L44.88,24.45a2.11,2.11,0,0,1,0,3.7L5.1,49.41A2.11,2.11,0,0,1,2,47.55V25.83" />
<path class="front" d="M2,25.83V4.11A2.11,2.11,0,0,1,5.13,2.27L44.88,24.45a2.11,2.11,0,0,1,0,3.7L5.1,49.41A2.11,2.11,0,0,1,2,47.55V25.83" />
</svg>
</div>
</div>
<div class="j2">
<div class="jacketa" title="[ Enjoy The Music ]">
<svg class="coversvg" viewBox="0 0 47.96 51.66">
<title>[ Enjoy The Music ]</title>
<path class="back" d="M2,25.83V4.11A2.11,2.11,0,0,1,5.13,2.27L44.88,24.45a2.11,2.11,0,0,1,0,3.7L5.1,49.41A2.11,2.11,0,0,1,2,47.55V25.83" />
<path class="front" d="M2,25.83V4.11A2.11,2.11,0,0,1,5.13,2.27L44.88,24.45a2.11,2.11,0,0,1,0,3.7L5.1,49.41A2.11,2.11,0,0,1,2,47.55V25.83" />
</svg>
</div>
</div>
</div>
</div>【讨论】：
【参考方案2】：发生这种情况是因为 div .j1 和 .j2 应用了属性“overflow:hidden”。您无法删除此属性，因为它充当掩码。
您应该在这些 div 中添加一些边距或填充，并相应地更改绝对定位项的尺寸。
【讨论】：
你能提供一个代码 sn-p 以便我明白你的意思吗？ 看@VladislavAkhmetvaliyev 的回答，好像没问题。 是同样的技术。这些值可以更好，例如添加 30px 而不是 20px 并调整高度（顶部还有一点切口）。检查他的代码和你的代码之间的差异，使用这些值并找到更适合你的项目的那些。 “你还看到我做的代码有删减吗？”是的，如果你从下面看你的显示器，你可以看到它。 在代码 1 实现中，没有。以上是关于图像在所有 4 个面上都被截断的主要内容，如果未能解决你的问题，请参考以下文章
SQL Server Compact 4.0 图像列被截断为 8000
Pillow 返回错误：“IOError：图像文件被截断（6 个字节未处理）”
在自定义 collectionViewLayout 中，所有图像看起来都被拉伸了