Динамическая подстройка изображения в зависимости от высоты

Question

Я пытаюсь повторить этот пример в качестве упражнения.

Я пытаюсь динамически перенастраивать div изображения, когда я нажимаю текст над или под ним.

Итак, я сделал набросок, чтобы попробовать. Но я застрял, так как не знаю, как рассчитать оставшееся пространство, когда div expanded открыт, чтобы изображение поместилось в этом пространстве.

jQuery(document).ready(function($)
{
  $("#ex").click(function()
  {
    $("#expanded").slideToggle(200)
      if ($("#ex").text() == "infos")
      {         
         $("#ex").html("close")
         $("#fit-picture").css("height", "20px");
      }
      else 
      { 
         $("#ex").text("infos")
         $("#fit-picture").css("height", "100vh");
      }
  });  
});

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

.container{
height:100vh;
}

#fit-picture{
  width: auto;
  height: 100vh;
}

<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;">the image is supposed to be reduced proportionally to fit the remaining space of the screen.
</div>
<img id="fit-picture"
     src="https://www.wanimo.com/veterinaire/wp-content/uploads/2018/11/chat-jaloux-e1574672723199@2x.jpg">
</div>

Answer 1

Итак, это не совсем адаптивно, и вам нужно заранее определить всю высоту, но вот решение:

jQuery(document).ready(function($)
{
  
  $("#ex").click(function()
  {
    
    $("#expanded").slideToggle(200)

      if ($("#ex").text() == "infos")
      {         
        $("#ex").html("close")

        $("#fit-picture").animate({height:"45vh"}, 200) ;


       
        
      }
      else 
      { 
        $("#ex").text("infos")
        $("#fit-picture").animate({height:"95vh"}, 200);
      }
    
  });  
  
});

Answer 2

В HTML замените свой тег изображения следующим:

<img id="fit-picture" src="https://www.wanimo.com/veterinaire/wp-content/uploads/2018/11/chat-jaloux-e1574672723199@2x.jpg" class="center">

В CSS вставьте

.center {
  display: block;
  margin-left: auto;
  margin-right: auto;
  width: 50%;
}

Вместо этого вы должны указать высоту и ширину в% пикселей. Это поможет каждый раз изменять размер изображения для изменения размера окна. Это был бы самый простой способ выполнить работу.