网站显示问题求助：图片尺寸、定位及Footer错位修复

1. 修复Yu-Gi-Oh!图片尺寸不匹配问题 #

调整height/width无效，大概率是图片父容器的flex属性限制或图片本身的缩放规则导致的：

• 给图片添加object-fit: cover;（或contain，根据需求选择），确保图片按比例填充容器，避免拉伸变形
• 检查父容器是否默认设置了flex-shrink: 1，若要图片保持原比例，给父容器加上flex-shrink: 0，同时明确容器宽高（和MTG图片容器一致）：

.yugioh-img-wrap {
  flex-shrink: 0;
  width: 220px; /* 与MTG图片容器宽度统一 */
  height: 310px; /* 对应比例高度 */
}
.yugioh-img-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover; /* 保持比例，裁剪多余部分 */
}

• 若图片本身尺寸过小，可添加min-width: 100%强制占满容器，防止被压缩。

2. 解决Yu-Gi-Oh!图片无法左移的问题 #

位置固定无法左移，通常是父容器的内边距、外边距或flex对齐属性导致：

• 检查图片所在的flex容器是否设置了justify-content: center/space-between，改为justify-content: flex-start实现左对齐
• 移除容器或图片自身的margin-left: auto或固定margin值
• 确保父容器宽度足够，可设置width: 100%让其充满父元素：

.image-container {
  display: flex;
  justify-content: flex-start;
  padding-left: 0; /* 清除默认内边距 */
  margin: 0; /* 清除默认外边距 */
  width: 100%;
}

3. 修复Footer布局错位问题 #

Footer错位常见原因是前置元素高度塌陷或定位属性错误：

• 若用flex做整体页面布局，给body设置display: flex; flex-direction: column; min-height: 100vh;，再给Footer加margin-top: auto固定到底部：

body {
  margin: 0;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}
footer {
  margin-top: auto;
  width: 100%;
  padding: 1.2rem 0;
  background-color: #f5f5f5;
}

• 若前置元素用了浮动，给Footer添加clear: both清除浮动影响：

footer {
  clear: both;
}

• 检查Footer是否被其他position: absolute元素覆盖，可调整z-index或自身定位属性。

补充说明 #

之前移除display:flex没用，是因为flex是当前容器的核心布局规则，盲目移除只会导致布局混乱。应该针对性调整flex子元素的flex-shrink、justify-content等属性，而非直接去掉布局方式。

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