Question

所以我已经玩了大约一个小时并且正在搜索stackoverflow。我只是想根据窗口大小调整将这个我设置为屏幕中心的图像留在中心。我找到了一些这样的事情，除了它可能会在一段时间后失去对屏幕中心的跟踪并离开中心。以下是我正在使用的代码。

HTML

<img data-target="#csgo1"  class="csgo img" align="middle" src="https://upload.wikimedia.org/wikipedia/en/6/6f/Smiley_Face.png"
<center><img data-target="#csgo1" style="display:none;" id="csgo1" class="csgo1 img" align="middle" src="pictures/csgo.png"></center>

CSS

.img
{
cursor:pointer;
}
.csgo1
{
opacity:.35;
-webkit-filter: brightness(70%);
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
-o-transition: all 1s ease;
-ms-transition: all 1s ease;
transition: all 1s ease;
margin:0 auto;
border-left: 75px;
border-right: 75px;
border-top:10px;
border-bottom:10px;
border-color:#0a1b0a;
border-style:solid;
left:40%;
top:100px;
position:fixed;
z-index:100;
transition: 1s ease;
}
.csgo1:hover
{
opacity:1;
-webkit-filter: brightness(100%);
-webkit-transform: scale(1.05);
-ms-transform: scale(1.05);
transform: scale(1.05);
transition: 1s ease;
}

JQuery的

//function to set image in center of screen
$(document).ready(function(){
$('.img').on('click', function(){
var target = $($(this).data('target'));
if(target.css('display') == "none"){ 
    target.attr('src',$(this).attr('src'));
    $(".content").animate({opacity: .1});
    $(".footer").animate({opacity: .1});
    target.attr('style', 'height:' + this.height*2 + 'px;');
    target.attr('style', 'width:' + this.width*2 + 'px;');
target.css("top", Math.max(0, (($(window).height() - target.outerHeight()) / 2)) + "px");
target.css("left", Math.max(0, (($(window).width() - target.outerWidth()) / 2)) + "px");
test = true;
    target.fadeIn();
}else{
    target.hide();
    test = false
    $(".content").animate({opacity: 1}, 10);
    $(".footer").animate({opacity: 1}, 10);
 }
});
});


//function to resize image on window resize
$(window).resize(function() {
var curWidth = $(window).width(); //store the window's current width
var curHeight = $(window).height(); 
var delta = (curWidth- origWidth);
var charlie = (curHeight- origHeight);
$(".csgo1").offset({left:($(".csgo1").offset().left + delta)});
$(".csgo1").offset({top:($(".csgo1").offset().top + charlie)});
origWidth = curWidth;
origHeight = curHeight;
});

https://jsfiddle.net/nathanahartmann/dqjua4dk/

任何有关如何在不失去窗口中心轨迹的情况下获得更加居中的画面的帮助将不胜感激!!

这是我正在努力修复此问题的实际网站。 nathanahartmann.com

使用text-align：center; 和顶部：计算（50％）;左：计算值（50％）; 如下所列未正确居中我的所有图像。任何帮助都将不胜感激。

Answer 1

嗨，请在下面找到codepen。但要了解此代码仅在图像高度和宽度得到修复时才有效。

你不需要那么多javascript，而是使用CSS。

HTML部分，

<div class="containerDiv">
  <img src="https://upload.wikimedia.org/wikipedia/en/6/6f/Smiley_Face.png" />
</div>

CSS部分，

.containerDiv
{
  width:100%;
  position:relative;
  height:100vh;
}
.containerDiv img
{
  position:absolute;
  top:calc(50% - 90px);
  left:calc(50% - 90px);
}

请参阅Demo

Answer 2

抱歉，我知道这不能回答你的问题，但只是为了分享我的方式：

var $lb = $("<div/>", {
    id: "lightbox",
    appendTo: "body",
    click :function() {
      $(this).removeClass("show");
    }
  });

$("[data-full]").click(function(){
  $lb.css({backgroundImage:"url('"+$(this).data("full")+"')"}).addClass("show");
});

html, body{height:100%;margin:0;}

#lightbox{
  box-shadow: 0 0 0 400px rgba(0,0,0,0.7);
  background: rgba(0,0,0,0.7) none 50% no-repeat;
  background-size: contain;
  -webkit-transition: 0.7s;
          transition: 0.7s;
  position: fixed;
  top: 0; left: 0;
  z-index: 1000;
  width: 90%; height: 90%;
  margin: 5%;
  opacity: 0;
  visibility: hidden;
}#lightbox.show{
  opacity: 1;
  visibility: visible;
}#lightbox:after{
  content:"×";
  color:#fff;
  position:absolute;
  right: 10px; top: 10px;
  font-size: 30px;
  cursor: pointer;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<img src="//placehold.it/120x120/4af/fff/&text=Click+me"
     data-full="//placehold.it/800x800/4af/fff/&text=Click+me">

<img src="//placehold.it/120x60/a4f/&text=Click+me"
     data-full="//placehold.it/800x400/a4f/&text=Click+me">

移动到窗口中心的图像用jquery调整大小

2 个答案: