Question

我正在寻找一种动态重新调整图像的方法，以便整个容器每次只能填充100vh。基本上，我的图像占了页面的几乎100％，但是当您单击图像时，图像会调整并适合扩展的灰色块。谢谢。

jQuery(document).ready(function($)
{
  
  $("#ex").click(function()
  {
    
    $("#expanded").slideToggle( 200);
     $("#fit-ex").slideToggle( 200);
    
      if ($("#ex").text() == "infos")
      {         
        $("#ex").html("close")
      }
      else 
      {     
        $("#ex").text("infos")
      }
    
  });  
  
});

 body{margin:0}

.container{ 
    height: 100%;
  min-height: 100%;}

#expanded{
    margin-top: 0px;  
    background: gray;
    width: 50vw; height: 50vh;
}



#ex {
    display: block;
    width: 50vw;
    background-color:darkgrey;
    text-decoration:none;
}

#ex:hover {
  background:black;
}


#fit-picture{
  width: 50vw;
}

    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <div class ="container">
  <div class="expand">
  <a href="#" id="ex">infos</a>
</div> 
<div id="expanded" style="display: none;">bonjour monde
</div>
<img id="fit-picture"
     src="https://i.pinimg.com/originals/33/58/0b/33580b8364dd054b15d6273bf9f9ffd6.png">
</div>

动态填充屏幕空间

0 个答案: