Bild, um in der Mitte des Fensters auf Fenstergröße mit jquery

Question

zu verschieben, so habe ich mit diesem für etwa eine Stunde gespielt und durch stackoverflow suchen. Ich versuche nur, dieses Bild, das ich in der Mitte des Bildschirms eingestellt habe, in der Mitte zu halten, basierend auf der Fenstergrößenanpassung. Ich habe etwas gefunden, das dies tut, abgesehen von der Tatsache, dass es nach einer Weile die Mitte des Bildschirms verlieren und aus der Mitte geraten kann. Unten ist der Code, den ich verwende.

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/

Jede Hilfe, wie eine zentrierte Bild, während es nicht los zu bekommen Spur der Mitte des Fensters würde sehr geschätzt werden !!

Hier ist meine aktuelle Website, an der ich arbeite, um dies zu beheben. nathanahartmann.com

Verwenden von text-align: center; und oben: calc (50%); links: calc (50%); wie unten aufgeführt hat nicht alle meine Bilder korrekt zentriert. Jede Hilfe mit diesem würde geschätzt werden.

Answer 1

Sorry, ich weiß, dass dies Ihre Frage nicht beantworten, aber nur einen Weg teilen würde ich tun Sie es:

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

hallo, bitte finden Sie unten Codepen. aber verstehen Sie, dass dieser Code nur funktioniert, wenn Ihre Bildhöhe und -breite fest ist.

Sie brauchen nicht so viel Javascript dafür, stattdessen verwenden Sie CSS.

HTML-Teil,

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

CSS Teil,

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

Siehe Demo