html - 在静态位置居中任何图像

Question

好吧，我没能找到我的问题的任何满意答案，所以我尝试发布它。

我需要单击我网站上的任何图像，并在不透明背景的静态视口(viewport)中以全尺寸显示它。

我的实际代码是这样的:

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

使用以下 .CSS

/* 这个fragment会提供一个静态的半透明灰色层，并且它正确运行 */

.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>