好吧,我没能找到我的问题的任何满意答案,所以我尝试发布它。
我需要单击我网站上的任何图像,并在不透明背景的静态视口(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
最佳答案
您可以使用 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>
关于html - 在静态位置居中任何图像,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/30421512/