Make image fill screen on click

问题

I have a layout with a header and a few images as content. I would like when any image is clicked, it expands to fit the screen with a transition. jQuery and JS are fair game. Here is what I have, I just can't get it to work with transition because of the position changes. It also should cover the header and doesn't.

 $( document ).ready(function() {
     $( "main img" ).click(function() {
         $(this).toggleClass("click");
     });
 });

html, body {
  height:100%;
  margin:0;
  padding:0;
}

header {
  height:25%;
  width:100%;
  background-color:blue;
}

main {
  display:flex;
  justify-content:space-around;
  flex-wrap:wrap;
}

main img {
  padding:1em;
  transition:1s;
}

main img.click {
  position:absolute;
  width:100%;
  height:auto;
  padding:0;
  transition:1s;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<header>
</header>
<main>
  <img src="https://placehold.it/100x100">
  <img src="https://placehold.it/100x100">
  <img src="https://placehold.it/100x100">
  <img src="https://placehold.it/100x100">
  <img src="https://placehold.it/100x100">
  <img src="https://placehold.it/100x100">
  <img src="https://placehold.it/100x100">
  <img src="https://placehold.it/100x100">
</main>

回答1:

$(document).ready(function() {

    $("img").click(function() {
        if($(this).width() == "100") {
            $($(this).clone(true)).insertAfter(this);
            $(this).css({"position" : "fixed", "z-index" : "3"});
            $(this).animate({"width" : $(window).width()-32, "height" : $(window).height()-32, "top" : "0px"}, 1000);
        }
        else {
            $(this).animate({"width" : "0px", "height" : "0px", "top" : ((($(window).height()-32)/2)-50)}, 500, function() { 
                $(this).remove();
            });
        }
    });
});

html, body {
  height:100%;
  margin:0;
  padding:0;
}

header {
  height:25%;
  width:100%;
  background-color:blue;
}

main {
  display:flex;
  justify-content:space-around;
  flex-wrap:wrap;
}

main img {
  padding:1em;
}

main {
  position:absolute;
  width:100%;
  height:auto;
  padding:0;
}

img {
  width: 100px;
  height: 100px;
  z-index: 2;
  position: relative;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<header>
</header>

<main>
  <img src="https://placehold.it/100x100">
  <img src="https://placehold.it/100x100">
  <img src="https://placehold.it/100x100">
  <img src="https://placehold.it/100x100">
  <img src="https://placehold.it/100x100">
  <img src="https://placehold.it/100x100">
  <img src="https://placehold.it/100x100">
  <img src="https://placehold.it/100x100">
</main>

来源：https://stackoverflow.com/questions/41864505/make-image-fill-screen-on-click