CSS transform scale fit to window size

Question

I have tried lot, but didn't get any proper solution.

Here is my code:

 $(function() { $(".zoom-close").on("click", function() { $(".zoom-close").toggleClass("transform", 1000); $(".img").toggleClass("active", 1000); }); });

 body { background: red; width: 100%; margin: 0; } .col { width: 30%; } .img { display: block; transition: all 0.5s ease; position: relative; transition: all 0.5s ease; -webkit-transition: 1s } .img img { width: 100%; } .img.active { position: absolute; left: 0; top: 0; transform: scale(2.5); -webkit-transform-origin: top left; transition: all 0.5s ease; } .img.active img { transition: all 0.5s ease; } .zoom-close { position: absolute; right: 10px; bottom: 10px; background: #eee; border: 0; width: 32px; height: 32px; padding: 8px 8px 15px; cursor: pointer; outline: 0; border-radius: 0; transition: all 0.5s ease; } .zoom-close.transform { border-radius: 100%; transition: all 0.5s ease; z-index: 10; background: #fff; position: absolute; right: 5px; top: 18px; } .zoom-close.transform .zoom-inner { opacity: 0; transition: all 0.5s ease; } .zoom-close.transform .zoom { border: 0; } .zoom-close.transform .zoom:before { width: 2px; height: 17px; top: 1px; left: 7px; transform: rotate(45deg); transition: all 0.5s ease; } .zoom-close.transform .zoom:after { height: 2px; width: 17px; top: 9px; left: -1px; transform: rotate(45deg); transition: all 0.5s ease; } .zoom { width: 10px; height: 10px; border-radius: 8px; position: relative; border: 2px solid #000; } .zoom:before { content: ''; width: 2px; height: 8px; background: #000; display: block; top: 1px; left: 4px; position: absolute; transition: all 0.5s ease; } .zoom-inner { width: 8px; height: 3px; display: block; background: #000; position: absolute; top: 10px; left: 7px; transform: rotate(45deg); -webkit-transform: rotate(45deg); transition: all 0.5s ease; } .zoom:after { content: ''; height: 2px; width: 8px; background: #000; display: block; top: 4px; left: 1px; position: absolute; transition: all 0.5s ease; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script> <div class="col"> <div class="img"> <img src="https://via.placeholder.com/250"> <button class="zoom-close"> <div class="zoom"><span class="zoom-inner"></span> </div> </button> </div> </div>

Could anyone help me in the below case:

<div class="img"> should be fit in to the window size (100% width), when we click on the <button class="zoom-close"> with the same transform effect.

(Please note: CSS transform property is not compulsory but I need the similar effect as it is..)

Answer 1

You need to get the screen sizes like width and height on zoom event

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<div class="col">
  <div class="img">
    <img src="https://via.placeholder.com/250"  >

  </div>
    <br><br><br>
    <button class="zoom-close">
      <div class="zoom"><span class="zoom-inner"></span> </div>
    </button>
</div>

JS

var flag=0;
$(function() {
  $(".zoom-close").on("click", function() {
    $(".zoom-close").toggleClass("transform", 1000);
   // $(".img").toggleClass("active", 1000);
   var height= window.screen.height;
   var width = window.screen.width;

   if(flag == 0){
        $("img").css("width", "15vw");
        $("img").css("height", "15vw");
        flag=1;
   }
   else{
        $("img").css("width", "100vw");
        $("img").css("height", "100vw");
        flag=0;
   }

  });
});