jqueryでウィンドウの中心に移動する画像

Question

私はこれを約1時間プレイしていて、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

テキストアラインメントを使用：center; およびtop：calc（50％）;左：calc（50％）;以下にリストされている は、すべての画像を正しく中央揃えしていません。これについての助けに感謝します。

Answer 1

私はこれがあなたの質問に答えていませんが、ちょうど私がしたい方法を共有するために知って申し訳ありませんを参照してください。それを行う：

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

Answer 2

こんにちは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