如何限制图片不超出父容器？Logo适配导航栏高度问题

一、让Logo填满导航栏高度且不超出容器 #

先确认HTML结构，保证Logo的父容器能正确继承导航栏高度，再通过CSS控制图片缩放行为：

1. 基础结构示例 #

<nav class="navbar">
  <a href="/" class="logo-wrapper">
    <img src="your-logo.png" alt="首页" class="logo">
  </a>
  <!-- 其他导航选项 -->
</nav>

2. 对应CSS设置 #

/* 导航栏基础样式 */
.navbar {
  height: 50px;
  /* 可选：对齐其他导航项时添加flex布局 */
  display: flex;
  align-items: center;
  /* 提前预防子元素溢出 */
  overflow: hidden;
}

/* Logo链接容器：确保高度继承导航栏 */
.logo-wrapper {
  display: inline-block; /* 行内块元素才能设置高度 */
  height: 100%;
  text-decoration: none; /* 可选：移除链接下划线 */
}

/* Logo图片：按比例填满高度，不超出容器 */
.logo {
  height: 100%;
  width: auto; /* 保持图片原有宽高比，避免拉伸变形 */
  /* 可选：若需图片尽可能填充容器且保比例，用以下属性 */
  /* object-fit: contain; */
  /* 可选：允许裁剪图片以填满容器，用以下属性 */
  /* object-fit: cover; */
}

你之前设置width:100%; height:100%;导致溢出，是因为图片原始宽高比和导航栏比例不匹配，强制拉伸会让尺寸超出父容器。用height:100%; width:auto;会让图片按原始比例缩放，高度刚好填满导航栏，宽度自动适配，不会超出边界。

二、让容器内所有元素不超出边界 #

有两种核心方案，按需选用：

1. 全局盒模型重置，从根源避免溢出 #

给所有元素设置box-sizing: border-box;，这样元素的padding和border会被包含在设置的width/height内，不会额外撑开容器：

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

这是前端开发常用的重置手段，能解决绝大多数盒模型导致的溢出问题。

2. 容器层面裁剪溢出内容 #

若已出现元素溢出，给导航栏容器添加overflow: hidden;，直接裁剪超出边界的部分：

.navbar {
  height: 50px;
  overflow: hidden; /* 裁剪所有超出容器的内容 */
}

如果需要允许内容滚动（比如导航项过多时），可替换为overflow-x: auto;（横向滚动）或overflow-y: auto;（纵向滚动）。

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