网页图片上下被裁剪（呈放大显示状态）的问题求助

问题原因 #

1. 全局img样式冲突：你写了两次全局img选择器，后一个（.card下方的img样式）覆盖了前一个，其中object-fit: cover和固定height:200px会强制裁剪.container里的图片，导致上半部分被截断。
2. 固定导航栏遮挡内容：nav是fixed定位，会悬浮在页面上方，但你的body没有设置顶部内边距，.container的内容会被导航栏挡住一部分；同时.container设置了固定height:500px，配合align-items:center，图片会被垂直居中，叠加裁剪效果后就看不到上半部分。
3. 无效的main样式：你给main设置了padding-top，但HTML里没有<main>标签包裹内容，这个样式完全不起作用。

修复步骤 #

1. 区分不同图片的CSS样式 #

把全局img选择器改成针对性的后代选择器，避免样式冲突：

/* 仅作用于.container内的图片 */
.container img {
  max-width: 100%;
  height: auto;
  display: block;
  margin-right: 30px; /* 可选，增加和文本的间距 */
}

/* 仅作用于.card内的图片 */
.card img {
  height: 200px;
  object-fit: cover;
  width: 100%;
}

2. 给body添加顶部内边距，避开固定导航栏 #

body {
  background-color: #222;
  color: #fff;
  font-family: Arial, sans-serif;
  padding-top: 60px; /* 和导航栏高度匹配，避免内容被遮挡 */
}

同时删除无效的main样式，因为你的HTML里没有使用<main>标签。

3. 调整.container的高度与对齐方式 #

去掉.container的固定height:500px，让内容自适应高度；同时把垂直对齐方式改为顶部，避免图片被居中裁剪：

.container {
  display: flex;
  align-items: flex-start;
  margin: 50px;
  min-height: 500px; /* 可选，保留最小高度保证布局稳定 */
}

4. 可选：给导航栏添加层级优先级 #

给nav添加z-index，确保它始终在页面最上层，不会被其他内容覆盖：

nav {
  background-color: rgb(184, 184, 184);
  padding: 10px;
  position: fixed;
  top: 0;
  width: 100%;
  z-index: 999;
}

修复后的完整CSS代码 #

nav {
  background-color: rgb(184, 184, 184);
  padding: 10px;
  position: fixed;
  top: 0;
  width: 100%;
  z-index: 999;
}

ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  display: flex;
  justify-content: center;
}

li {
  margin: 0 10px;
}

nav a {
  color: white;
  text-decoration: none;
  transition: color 0.2s ease-out;
}

nav a:hover {
  color: #ccc;
}

body {
  background-color: #222;
  color: #fff;
  font-family: Arial, sans-serif;
  padding-top: 60px;
}

.container {
  display: flex;
  align-items: flex-start;
  margin: 50px;
  min-height: 500px;
}

.container img {
  max-width: 100%;
  height: auto;
  display: block;
  margin-right: 30px;
}

.text {
  flex-grow: 1;
}

h1 {
  font-size: 36px;
  margin-bottom: 20px;
}

p {
  font-size: 18px;
  line-height: 1.5;
}

.card {
  background-color: #fff;
  border-radius: 10px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
  margin: 20px;
  overflow: hidden;
  width: calc(50% - 40px);
  transition: transform 0.2s ease-in-out;
  float: left;
}

.card:hover {
  transform: scale(1.05);
}

.card img {
  height: 200px;
  object-fit: cover;
  width: 100%;
}

.card .text {
  padding: 20px;
}

h2 {
  font-size: 24px;
  margin-bottom: 10px;
}

.card p {
  font-size: 16px;
  line-height: 1.5;
  margin-bottom: 20px;
}

.card a {
  color: #222;
  text-decoration: none;
}

.card a:hover {
  opacity: 0.8;
}

html, body {
  height: 100%;
}

关键提示 #

新手容易踩的两个坑：一是滥用全局标签选择器导致样式冲突，尽量用后代选择器或类选择器精准控制样式；二是固定定位元素会脱离文档流，必须给父容器设置对应的内边距/外边距，避免内容被遮挡。

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