如何实现3张图片自适应导航栏并保持等高？

问题描述 #

尝试将3张图片放入导航栏时遇到布局问题，调整CSS的max-width属性、手动添加style属性均未解决。需要实现：三张图片均匀缩放适配导航栏，所有元素保持相同高度，且能随屏幕尺寸变化自适应。

当前代码 #

CSS #

@font-face {
    font-family: 'miauzers';
    src: url('miauzars.ttf')  format('truetype');
}

#tophead {
  font-family: 'miauzers'; 
  width: 100%; 
  text-align: center;
}

nav {
  max-width: 100%;
  height: auto;
  display: flex;
}

img {
  max-width: 100%;
}

HTML #

<nav> 
  <a href="profile.html" >
    <img src="https://porcelainbed.neocities.org/profpage.png" alt="a person's face split down the middle. profile page." id="profileimg" width="auto">
  </a>

  <a href="#bottom">
    <img src="https://porcelainbed.neocities.org/botp.png" alt="a spiral arrow pointing downwards. bottom of the page."  id="bottomimg" width="auto">
  </a> 

  <a href="art.html">
    <img src="https://porcelainbed.neocities.org/artpage.png" alt="a cat leaping, tree in the background. art page."  id="artimg" width="auto">
  </a>
</nav>

解决方案 #

修改CSS代码，通过Flexbox实现均等布局和自适应：

@font-face {
    font-family: 'miauzers';
    src: url('miauzars.ttf')  format('truetype');
}

#tophead {
  font-family: 'miauzers'; 
  width: 100%; 
  text-align: center;
}

nav {
  width: 100%; /* 确保导航栏占满父容器宽度 */
  display: flex;
  gap: 0; /* 移除图片间默认间隙 */
}

nav a {
  flex: 1; /* 每个链接容器均等分配导航栏宽度 */
}

nav img {
  width: 100%; /* 图片填充所在链接容器 */
  height: auto; /* 保持图片宽高比 */
  display: block; /* 消除图片底部默认空白 */
}

关键修改说明 #

• nav a添加flex: 1：让三个链接容器平分导航栏宽度，保证每张图片拥有均等的展示空间。
• nav img设置width: 100% + height: auto：图片完全填充容器，同时保持原有比例不拉伸变形，实现自适应缩放。
• nav的gap: 0和img的display: block：消除元素间的默认空白间隙，避免布局错位。
• nav改用width: 100%：确保导航栏始终占满可用宽度，适配不同屏幕尺寸。

内容的提问来源于stack exchange，提问作者Kat