Question

好吧，我无法找到任何问题的满意答案，所以我试着发布。

我需要点击我网站上的任何图片，并在具有不透明背景的静态视口中以完整尺寸显示。

我的实际代码是：

= link_to hide_image_path, :remote => :true, :title => "Close" do
  .full_screen_image
  .opaque
    %img.image-middle{:src => UrlSafeBase64.decode64(image), :alt => ""}

使用以下.CSS

/ *这个片段将提供一个静态的半透明灰色层，并且它可以正确运行* /

.full_screen_image {
  position: fixed;
  background-color: #6c6c6c;
  opacity: 0.8;
  z-index: 2000;
  top: 5%;
  left: 5%;
  bottom: 5%;
  right: 5%;
}

/ *这应该在前一个

之上提供100％不透明层

.opaque {
  position: relative;
  z-index: 2005;
  opacity: 1;

}

/ *最后一个是图像

.image-middle {
  position: static;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  -moz-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  -o-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}

那么， - 图像是100不透明的，这是正确的，但是 - 它被定位在屏幕的中心，而不是像.image-middle规则所描述的那样 - 第一层没有滚动（这是预期的行为） - 图像滚动（这不是预期的行为）

我只需要使用CSS / HTML，没有Jquery / Jscript

来实现预期的结果

Answer 1

你可以使用jquery来实现这一点。

<script>
            $(document).ready(function() {
                $('.popup-with-zoom-anim').magnificPopup({
                    type: 'inline',
                    fixedContentPos: false,
                    fixedBgPos: true,
                    overflowY: 'auto',
                    closeBtnInside: true,
                    preloader: false,
                    midClick: true,
                    removalDelay: 300,
                    mainClass: 'my-mfp-zoom-in'
            });
        });
        </script>

将此代码添加到HTML代码中，它会显示图片，点击图片会显示完整尺寸的图片

<div class="mfp-hide">
            <div id="small-dialog1" class="pop_up">
                <h2>work1</h2>
                <img src="yourpic.JPG" alt="images "/>


        <div class="gallerylist-wrapper">               
                <a class="popup-with-zoom-anim" href="#small-dialog1">
                    <img src="yourpic.JPG" height="200px" width="200px"  alt="Image 1"/>
                    <span><img src="yourpic.JPG" alt="image "/> </span>
                    <div class="desc">

                    </div>
                    </a>
                    </div>

Answer 2

嗯， KISS 是我的答案！

正确的代码如下

= link_to hide_image_path, :remote => :true, :title => "Close" do
  .full_screen_image
  %img.image-middle{:src => UrlSafeBase64.decode64(image), :alt => ""}

使用以下2个CSS规则（注意它是固定的而不是静态的！）：

.full_screen_image {
  position: fixed;
  background-color: #6c6c6c;
  opacity: 0.8;
  z-index: 2000;
  top: 5%;
  left: 5%;
  bottom: 5%;
  right: 5%;
}

.image-middle {
  position: fixed;
  opacity: 1;
  z-index: 2005;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  -moz-transform: translate(-50%, -50%); 
  -ms-transform: translate(-50%, -50%);
  -o-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}

感谢您的帮助，我希望这个解决方案可以帮助其他人解决类似问题。

将任何图像置于静止位置

2 个答案: