关闭侧面导航时防止图像折叠？

Question

如何防止我的图像在关闭侧面导航时缓慢折叠？

我从 w3schools 拿了这个例子，它是一个基本的侧边导航，当关闭时慢慢地将宽度转换为 0px

我在此导航中添加了一个图像，但与其他内容不同，当侧导航慢慢关闭时，它不会保持其尺寸，图像变得越来越小，直到它消失。

我希望图像保持其尺寸并像其他内容一样慢慢关闭。 我目前拥有它的方式，看起来太不自然了。

我一直无法找到与此问题相关的问题，因为我不确定完全发生了什么，边距是否正在崩溃？ 它必须处理溢出吗？ 我不完全确定要谷歌什么，如果问题已经被问到，我很抱歉。

 <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <style> body { font-family: "Lato", sans-serif; } .sidenav { height: 100%; width: 0; position: fixed; z-index: 1; top: 0; left: 0; background-color: #111; overflow-x: hidden; transition: 0.5s; padding-top: 60px; } .sidenav a { padding: 8px 8px 8px 32px; text-decoration: none; font-size: 25px; color: #818181; display: block; transition: 0.3s; } img { width:100%; } .sidenav a:hover { color: #f1f1f1; } .sidenav .closebtn { position: absolute; top: 0; right: 25px; font-size: 36px; margin-left: 50px; } @media screen and (max-height: 450px) { .sidenav {padding-top: 15px;} .sidenav a {font-size: 18px;} } </style> </head> <body> <div id="mySidenav" class="sidenav"> <a href="javascript:void(0)" class="closebtn" onclick="closeNav()">&times;</a> <div> <img src="https://i.vgy.me/PguXpb.jpg" alt="PguXpb.jpg" > </div> <a href="#">About</a> <a href="#">Services</a> <a href="#">Clients</a> <a href="#">Contact</a> </div> <h2>Animated Sidenav Example</h2> <p>Click on the element below to open the side navigation menu.</p> <span style="font-size:30px;cursor:pointer" onclick="openNav()">&#9776; open</span> <script> function openNav() { document.getElementById("mySidenav").style.width = "250px"; } function closeNav() { document.getElementById("mySidenav").style.width = "0"; } </script> </body> </html>

Answer 1

你需要这样的结果吗？

 <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <style> body { font-family: "Lato", sans-serif; } .sidenav { height: 100%; width: 0; position: fixed; z-index: 1; top: 0; left: 0; background-color: #111; overflow-x: hidden; transition: 0.5s; padding-top: 60px; } .sidenav a { padding: 8px 8px 8px 32px; text-decoration: none; font-size: 25px; color: #818181; display: block; transition: 0.3s; } img { width:100%; height: 100%; object-fit: cover; } .sidenav a:hover { color: #f1f1f1; } .sidenav .closebtn { position: absolute; top: 0; right: 25px; font-size: 36px; margin-left: 50px; } .img_block { height: 250px; } @media screen and (max-height: 450px) { .sidenav {padding-top: 15px;} .sidenav a {font-size: 18px;} } </style> </head> <body> <div id="mySidenav" class="sidenav"> <a href="javascript:void(0)" class="closebtn" onclick="closeNav()">&times;</a> <div class="img_block"> <img src="https://i.vgy.me/PguXpb.jpg" alt="PguXpb.jpg" > </div> <a href="#">About</a> <a href="#">Services</a> <a href="#">Clients</a> <a href="#">Contact</a> </div> <h2>Animated Sidenav Example</h2> <p>Click on the element below to open the side navigation menu.</p> <span style="font-size:30px;cursor:pointer" onclick="openNav()">&#9776; open</span> <script> function openNav() { document.getElementById("mySidenav").style.width = "250px"; } function closeNav() { document.getElementById("mySidenav").style.width = "0"; } </script> </body> </html>

Answer 2

我想你想要这个：

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
  
body {
  font-family: "Lato", sans-serif;
}

.sidenav {
  height: 100%;
  width: 0;
  position: fixed;
  z-index: 1;
  top: 0;
  left: 0;
  background-color: #111;
  overflow-x: hidden;
  transition: 0.5s;
  padding-top: 60px;
}

.sidenav a {
  padding: 8px 8px 8px 32px;
  text-decoration: none;
  font-size: 25px;
  color: #818181;
  display: block;
  transition: 0.3s;
}
  img {
    width:250px;
  }

.sidenav a:hover {
  color: #f1f1f1;
}

.sidenav .closebtn {
  position: absolute;
  top: 0;
  right: 25px;
  font-size: 36px;
  margin-left: 50px;
}

@media screen and (max-height: 450px) {
  .sidenav {padding-top: 15px;}
  .sidenav a {font-size: 18px;}
}
</style>
</head>
<body>

<div id="mySidenav" class="sidenav">
  <a href="javascript:void(0)" class="closebtn" onclick="closeNav()">&times;</a>
  <div>
    <img src="https://i.vgy.me/PguXpb.jpg" alt="PguXpb.jpg" >
  </div>
  <a href="#">About</a>
  <a href="#">Services</a>
  <a href="#">Clients</a>
  <a href="#">Contact</a>
</div>

<h2>Animated Sidenav Example</h2>
<p>Click on the element below to open the side navigation menu.</p>
<span style="font-size:30px;cursor:pointer" onclick="openNav()">&#9776; open</span>

<script>
function openNav() {
  document.getElementById("mySidenav").style.width = "250px";
}

function closeNav() {
  document.getElementById("mySidenav").style.width = "0";
}
</script>
   
</body>
</html>

关闭侧面导航时防止图像折叠？

问题描述

1 个解决方案

解决方案1
1 2021-07-28 18:37:44

解决方案2
0 2021-07-28 18:45:53

关闭侧面导航时防止图像折叠？

问题描述

1 个解决方案

解决方案1 1 2021-07-28 18:37:44

解决方案2 0 2021-07-28 18:45:53

解决方案1
1 2021-07-28 18:37:44

解决方案2
0 2021-07-28 18:45:53