提示:本站收集StackOverFlow近2千万问答，支持中英文搜索，鼠标放在语句上弹窗显示对应的参考中文或英文， 本站还提供 中文繁体 英文版本 中英对照 版本，有任何建议请联系yoyou2525@163.com。
我正在编写一个网站，其中有我必须向客户展示的文档图像。 但是，由于从网站上直接查看图像太小，我去搜索“onclick zoom”js/jq。 我找到了这个宝石。 但现在的问题是，我可以查看缩放动作，但缩放后图像无法查看。
相关scss：
section {
position: relative;
width: 100%;
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
overflow: hidden;
scroll-snap-align: start;
}
#particles-js3 {
width: 100%;
height: 100vh;
}
.content {
width: 100%;
text-align: center;
position: absolute;
color: $darkft;
pointer-events: none;
height: 100vh;
display: flex;
flex-direction: column;
}
.block {
height: 75%;
width: 85%;
border-radius: 1em;
margin: auto;
background: $lightbgls;
//Just a colour display: flex;
backdrop-filter: blur(3px);
justify-content: center;
align-items: center;
}
.wrapper {
margin-top: 100px;
padding-top: 150px;
padding-bottom: 0%;
position: relative;
max-width: 90%;
margin: 0 auto;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
}
.card {
height: auto;
// top: 30px;
position: sticky;
border: 1px solid white;
box-shadow: 0 0 20px 0px white;
background-color: #141E30;
backdrop-filter: blur(10px);
color: #ffffff;
padding: 40px;
border-radius: 1em;
margin-bottom: 50px;
transition: ease-in-out 0.4s;
&:hover {
transform: scale(1.04);
color: black;
background-color: #577ca7;
transition: ease-in-out 0.4s;
}
}
img {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
}
img.card-img {
position: static !important;
width: 55%;
border-radius: 1em;
@media screen and (max-width: 500px) {
width: 80%;
}
}
html代码：
<body>
<section id="Continuation">
<div id="particles-js3">
<div class="content">
<h2 style="color: #535fbe;"> Continuation </h2>
<div class="block" style="overflow: auto; pointer-events: auto; display: block;">
<div class="wrapper">
<div class="card">
<h2>Atlassian</h2>
<p>Atlassian software suite is a fairly new concept for most of us...</p>
<img src="/Multimedia/146904bb-1ecd-4403-9ac7-dbcd85947275.webp" class="card-img img-zoomable">
<img src="/Multimedia/a519159a-f85f-43aa-8eee-fe7be17f78ae.webp" class="card-img img-zoomable">
</div>
</div>
</div>
</div>
</div>
</section>
</body>
Js（在 html 中）：
<script src="https://unpkg.com/zooming/build/zooming.min.js"></script>
<script>
// Listen to images after DOM content is fully loaded
document.addEventListener('DOMContentLoaded', function () {
new Zooming({
// options...
bgColor: 'rgba(0,0,0,1)',
customSize: '100%'
}).listen('.img-zoomable')
})
</script>
我使用 CDN 并按照此 repo 开发人员提供的文档中的说明进行操作。 但是，我的图像仍未完全“隔离”或缩放。 这里有些例子：
我的代码在悬停时做了什么：
当我单击图像上的“缩放”时，我的代码会做什么：
如您所见，单击图像进行缩放后，我可以查看缩放并平移图像的一部分，但随后整个屏幕变黑。 我发现了为什么会发生这种情况，原因是我的缩放配置中的bgColor: 'rgba(0,0,0,1)' 。 但这应该是背景不是吗？ 我尝试将它的不透明度更改为0 ，它在技术上有效，背景仍然可见。 我还阅读了他们的github 页面中的部分
警告/限制
避免使用固定位置的图像#34。 如果任何父元素具有样式溢出，则放大后图像将不可见： hidden #22 。
我尝试了删除现有overflow: ___ scss，但结果证明图像仍然以某种方式隐藏在背景后面。 有谁知道我做错了什么，我该如何解决这个问题？
我认为css有点乱。 当您查看开发工具时，您会发现其中很多都没有被考虑在内，并且一些 css 是不必要的。 我清理了一下，可以看到放大的图像：
https://codepen.io/polinq/pen/yLKNggV
我不知道这有多大帮助，但我很确定一旦您清理了代码（可能从头开始），您将能够看到图像按预期工作。
.card {
border: 1px solid white;
background-color: #141E30;
color: #ffffff;
padding: 40px;
border-radius: 1em;
margin-bottom: 50px;
}
.wrapper {
padding-top: 150px;
max-width: 90%;
margin: 0 auto;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
}
.block {
height: 75%;
width: 85%;
border-radius: 1em;
margin: auto;
overflow: auto;
pointer-events: auto;
display: block;
}
h2 {
text-align: center;
}
.content {
text-align: center;
color: $darkft;
pointer-events: none;
}
.particles-js3 {
height: 100vh;
width: 100%;
}
.card-img {
width: 55%;
border-radius: 1em;
}
声明：本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.