当前位置： 文江博客 话题详情

放大图像onclick，但BG-Col接管IMG

发布于 2025-02-11 19:00:52 字数 4706 浏览 0 评论 0 原文

我正在编程一个网站，其中我有必须向客户展示的文档图像。但是，由于从网站清晰查看图像太小，因此我去搜索“ OnClick Zoom” JS/JQ。我发现此 gem 。但是现在的问题是，我可以查看缩放操作，但是缩放后的图像是无法查看的。

相关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，并按照文档由本仓库的开发人员提供。但是，我的图像仍然没有完全“隔离”或缩放。这里有一些示例：

我的代码在悬停时做什么：

​

​png“ rel =” nofollow noreferrer“> “

您可以看到，在我点击之后，要缩放的图像，我可以查看缩放并翻译图像的一部分，但是整个屏幕变成黑色。我发现了为什么发生这种情况的原因， bgcolor：'rgba（0,0,0,1）'在我的缩放配置中。但这应该是背景吗？我尝试将其不透明度更改为 0 ，并且在技术上工作，背景仍然可见。我还阅读了他们的 github page

警告 /限制< / p>

避免使用固定位置图像＃34。 如果任何父元素都有样式溢出，则在Zoom-IN之后看不到图像：隐藏＃22 < /a>。

我尝试了删除现有的溢出的替代方法：___ scss来自所有父母，但事实证明，图像仍然以某种方式隐藏在背景后面。有谁知道我在做什么错，我该如何解决这个问题？

原文

I am programming a website, where I have images of documents that I have to present to my clients. However, as the images are too small when viewed plainly from the website, I went to search for "onclick zoom" js/jq. I found this gem instead. But the problem now is that, I can view the zooming action, but image is unviewable after zooming.

Related 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 code:

<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 (in 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>

I used CDN and did as told in the documentation provided by the developers of this repo. However my images are still not fully "isolated" or zoomed. Here are some examples:

My code does what when hover:

Hover example.

My code does what when I click to "zoom" on image:

After "zooming"

As you can see, after I clicked the image to zoom, I can view the zoom and translate part of the image, but then the whole screen turns black. I found out why this happened, cause of the bgColor: 'rgba(0,0,0,1)' in my zoom configuration. But that is supposed to be the background isn't it? I tried changing the opacity of it, to 0, and it technically worked, with the background still visible. I also read the part in their github page that

Caveats / Limitations

Avoid working with fixed position images #34.
Image won't be visible after zoom-in if any parent element has style overflow: hidden #22.

I tried the alternative of removing the existing overflow: ___ scss from all parent, but the image turned out to be still hidden behind the background somehow. Does anyone know what I am doing wrong, and how could I resolve this issue?

如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论， 你可以免费 注册 一个本站的账号。

评论（1）

水晶透心 2025-02-18 19:00:52

我认为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;
}

I think the css is a bit messy. When you look into the dev tools you can see a lot of them are not being taken into consideration and some of the css is unnecessary. I cleaned up a bit and I can see the image being zoomed in:

https://codepen.io/polinq/pen/yLKNggV

I don't know how much is this of a help but I am pretty sure once you clean up the code (maybe start from scratch) you will be able to see the images working as expected.

.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;
}
回复 原文
~没有更多了~

关于作者

心奴独伤

暂无简介

文章
评论
27 人气
发私信

相关话题

更多

热门标签

操作系统 程序设计 IT运维 Linux系统管理 JavaScript 服务器应用 solaris C/C++ PHP Shell BSD Vue.js aix Oracle Python HTML 系统管理 HTML5 CSS 前端
更多

推荐作者

qq_aHcEbj

文章 0 评论 0

qq_ikhFfg

文章 0 评论 0

寻找我们的幸福

文章 0 评论 0

把昨日还给我

文章 0 评论 0

wj_zym

文章 0 评论 0

巴黎夜雨

文章 0 评论 0

更多

友情链接

文江博客
    我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站，即表示您同意使用 Cookies 和您的相关数据。
    原文