繁体   English   中英

缩放图像 onclick,但 bg-col 接管 img

Zooming image onclick, but bg-col takes over img

提示:本站收集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,但结果证明图像仍然以某种方式隐藏在背景后面。 有谁知道我做错了什么,我该如何解决这个问题?

1 个回复

我认为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;
}
1 在背景图像上的位置元素。 但是BG img随窗口改变大小。 的CSS

我有一个背景图像,该图像的大小更改为窗口大小,并且我需要在其上放置一个元素,以使其相对于背景图像始终位于同一位置。 怎么样!? 的CSS 背景图像覆盖了整个背景,并随窗口而改变了大小,但是通过覆盖一些图像来保持比例。 编辑-2016 我使用纯CSS的解决方案是将元 ...

2 Img类与图像bg删除边框

我有一个带有背景图像的img类,我在它上面有一个不寻常的灰色边框。 我想删除边框但有边框:0px无法解决问题。 我提供了一个复制我的工作的小提琴。 在这里小提琴 .facebook { background: url(http://dev.truewarpit.com/ ...

2014-12-01 08:49:17 1 67   html/ css
3 选择一个图像作为 bg-img 出现在 div 中

我正在构建一个数字海报编辑器,因此我需要帮助将图像设置为 div 的背景外观。 我不知道从哪里开始 我创建了一个带有几个图像的 div 可供选择,一个空的 div 只有一个 div id。 这是我的图像div: 这是我的空 Div: 基本我需要帮助编写 js 代码或一些关于如何通过从div ...

4 缩放影像

我有一个来自tut的代码,该代码可以滚动和缩放图像,但是即使图像很小,该代码也会拉伸图像,使其充满整个屏幕。 我希望它有一个对话框,其中可能包含图像,并且可以通过修改代码而不占用整个屏幕的方式来进行缩放和滚动。 编辑:是否可以使用以下代码来限制滚动或限制图像的大小? 第一个显示器上有一 ...

5 ol bg图片应该在li bg图片之上

我必须达到这样的目标: 我决定将ol与背景图片一起使用。 这是我的HTML和CSS: // html // CSS 这是webste的链接 1)有很多问题,但是第一个问题是我无法使ol的背景图像超过段落背景的背景图像。 2)其次,我不确定使用ol ...

2013-06-09 13:36:22 1 492   css
6 在不透明图像上具有透明背景的图像[重复]

这个问题在这里已经有了答案: 如何叠加图像11 个答案 7 个月前关闭。 我想在纯色图像上叠加一个线条图像(没有背景,只有线条),以便线条叠加在另一个不透明的图像上。 我已经尝试过将叠加层同时用作 PNG 和 GIF,但它一直显示为实心,完全覆盖了第二张图像。 我什至尝试过使用 z-index 无 ...

7 BG图像上的视差H1

我在背景图片上方有一个h1, 使用以下css: 我希望尽可能简洁地在此大致复制此效果 。 输入赞赏。 ...

10 放大可使div悬停在固定位置的img上

我有一个标题,其中包含徽标的img ( position: fixed )和一个以边距为中心的grid ,其中包含标题中除徽标以外的所有内容。 HTML看起来像这样: CSS看起来像这样: 现在,当我放大时, #header-grid越过#logo 。 我希望他们彼此靠近,而 ...

2018-06-07 09:14:53 1 25   html/ css
暂无
暂无

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2022 STACKOOM.COM