为何下拉菜单中文本框与图片尺寸不匹配？如何实现二者尺寸一致？

原因分析 #

你的.dropdown-content容器设置了max-width: 160px，但内部图片宽度是300px，这个最大宽度限制会压缩图片，同时容器默认不会自动适配图片的宽高；再加上容器内的.desc元素带有内边距，进一步导致容器和图片尺寸不匹配。

解决方法 #

• 删掉.dropdown-content里的max-width: 160px，解除宽度限制
• 给.dropdown-content加上width: fit-content，让容器宽度自动匹配内部图片的宽度
• 如果要让容器高度和图片完全一致，把.desc元素移到.dropdown-content外面，或者给.desc设置绝对定位，让它不占用容器的高度空间

修改后的完整代码 #

CSS #

.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f9f9f9;
  width: fit-content;
  box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
  z-index: 1;
}

.dropdown:hover .dropdown-content {
  display: block;
}

.desc {
  padding: 15px;
  text-align: center;
  /* 可选：如果要把描述放在图片下方且不影响容器高度，启用以下样式 */
  /* position: absolute;
  bottom: -45px;
  left: 0;
  width: 100%;
  background-color: #f9f9f9;
  box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2); */
}

.dropdown {
  display: inline-block;
  position: relative;
}

HTML #

<h2>Dropdown Image</h2>
<p>Move the mouse over the image below to open the dropdown content.</p>

<div class="dropdown">
  <img src="Images/forest.png" alt="Tree" width="100" height="50">
  <div class="dropdown-content">
    <img src="Images/forest.png" alt="Forest" width="300" height="200">
  </div>
  <div class="desc">Forest With Road</div>
</div>

内容的提问来源于stack exchange，提问作者Khadija Tul Kubra