我正在尝试重做that example作为练习。
当我单击上方或下方的文字时,我试图动态调整图像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>
答案 0 :(得分:0)
在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%;
}
您应该以%而不是px表示高度和宽度。每次调整窗口大小时,这将有助于调整图像大小。这将是完成工作的最简单方法。
答案 1 :(得分:0)
因此,它并不是真正的自适应性,您必须先定义所有高度,但这是一种解决方案:
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);
}
});
});