点击即可制作图像填充屏幕

Question

我有一个带有标题和一些图像作为内容的布局。我希望当点击任何图像时，它会扩展以适应屏幕的过渡。 jQuery和JS是公平的游戏。这是我拥有的，由于position更改，我无法让它与转换一起使用。它也应该覆盖标题并且没有。

＆＃13;

＆＃13;

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

＆＃13;

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;
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

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