前端项目响应式问题求助：图片与Footer显示异常

数据老陈

2026-8-1

一、600px-1024px区间图片无法拉伸的修复

问题根源

图片URL错误：img标签的src指向Imgur页面而非直接图片资源，浏览器无法正确渲染图片。
缺少中间区间样式：仅针对min-width:1024px做了布局调整，600px-1024px区间无适配样式，图片容器未占满可用宽度。
图片容器未设置宽度：picture标签未设置100%宽度，内部img无法继承容器宽度实现拉伸。

修复步骤

修正img标签的src为直接图片URL：将<img src="https://imgur.com/HCLtExf" alt="" />改为<img src="https://i.imgur.com/HCLtExf.jpg" alt="Business insights visualization" />
新增600px-1024px区间的媒体查询，确保图片占满容器：

@media (min-width: 600px) {
  .card__img--image {
    width: 100%;
  }
  .card__img img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* 保证图片拉伸时不失真 */
  }
}

问题根源

使用position: fixed会让Footer脱离文档流，页面内容超过视口时会覆盖内容；同时body的place-content:center布局未预留Footer空间，切换分辨率时位置异常。

修复步骤

移除Footer的position: fixed样式，改用grid布局让body自动分配空间：

body {
  /* 替换原有place-content:center布局 */
  display: grid;
  grid-template-rows: 1fr auto;
  min-height: 100vh;
  padding-bottom: 2rem; /* 避免内容被Footer遮挡 */
}

main {
  display: grid;
  place-content: center;
}

footer {
  width: 100%;
}

修改后的完整代码

HTML代码

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="icon" type="image/png" sizes="32x32" href="./images/favicon-32x32.png" />
    <link rel="preconnect" href="https://fonts.googleapis.com" />
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;700&family=Lexend+Deca&display=swap" rel="stylesheet" />
    <link rel="stylesheet" href="reset.css" />
    <link rel="stylesheet" href="style.css" />
    <title>Frontend Mentor | Stats preview card component</title>
  </head>
  <body>
    <main>
      <article class="card">
        <div class="card__content">
          <h1 class="card__content--title">
            Get
            <span class="pretty">insights</span>
            that help your business grow.
          </h1>
          <p class="card__content--text">
            Discover the benefits of data analytics and make better decisions regarding revenue, customer experience, and overall efficiency.
          </p>
          <div class="card__content--stats">
            <div class="flex-group">
              <div class="companies">
                <p class="stats-numbers">10k+</p>
                <p class="stats-text">companies</p>
              </div>
              <div class="templates">
                <p class="stats-numbers">314</p>
                <p class="stats-text">templates</p>
              </div>
              <div class="queries">
                <p class="stats-numbers">12M+</p>
                <p class="stats-text">queries</p>
              </div>
            </div>
          </div>
        </div>
        <div class="card__img">
          <picture class="card__img--image">
            <source srcset="https://i.imgur.com/wlktPe0.jpg" media="(min-width: 600px)" />
            <img src="https://i.imgur.com/HCLtExf.jpg" alt="Business insights visualization" />
          </picture>
        </div>
      </article>
    </main>
    <footer>
      <div class="attribution">
        Coded by
        <a href="">Wilson</a>.
      </div>
    </footer>
  </body>
</html>

CSS代码

/*
  1. Use a more-intuitive box-sizing model.
*/
*,
*::before,
*::after {
  box-sizing: border-box;
}
/*
  2. Remove default margin
*/
* {
  margin: 0;
}
/*
  3. Allow percentage-based heights in the application
*/
/* html, body {
  height: 100%;
} */
/*
  Typographic tweaks!
  4. Add accessible line-height
  5. Improve text rendering
*/
body {
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}
/*
  6. Improve media defaults
*/
img,
picture,
video,
canvas,
svg {
  display: block;
  max-width: 100%;
}
/*
  7. Remove built-in form typography styles
*/
input,
button,
textarea,
select {
  font: inherit;
}
/*
  8. Avoid text overflows
*/
p,
h1,
h2,
h3,
h4,
h5,
h6 {
  overflow-wrap: break-word;
}
/*
  9. Create a root stacking context
*/
#root,
#__next {
  isolation: isolate;
}

:root {
  --clr-primary-main-background: hsl(233, 47%, 7%);
  --clr-primary-card-background: hsl(244, 38%, 16%);
  --clr-primary-accent: hsl(277, 64%, 61%);

  --clr-neutral-main-heading: hsl(0, 0%, 100%);
  --clr-neutral-main-paragraph: hsla(0, 0%, 100%, 0.75);
  --clr-neutral-stats-headings: hsla(0, 0%, 100%, 0.6);

  --fs-regular: 0.938rem;

  --ff-regular: "Inter", sans-serif;
  --ff-special: "Lexend Deca", sans-serif;

  --fw-regular: 400;
  --fw-bold: 700;
}

/* general styling */

body {
  font-family: var(--ff-regular);
  font-weight: var(--fw-regular);
  color: var(--clr-neutral-main-paragraph);
  font-size: var(--fs-regular);
  background-color: var(--clr-primary-main-background);

  /* 修改为grid布局，固定Footer在底部 */
  display: grid;
  grid-template-rows: 1fr auto;
  min-height: 100vh;
  padding-bottom: 2rem;
}

main {
  display: grid;
  place-content: center;
}

/* utilities */

.flex-group {
  display: flex;
  flex-direction: column;
  gap: 1.4rem;
  flex-wrap: wrap;
}

/* card styles */

.card {
  display: grid;
  border-radius: 0.5rem;
  overflow: hidden;
  background-color: var(--clr-primary-card-background);
  text-align: center;
  max-width: 1024px;
  margin: 5rem 1.5rem;
}

.card__content {
  display: grid;
  gap: 1.5rem;
  padding: 2rem;
  grid-row: 2;
}

.card__content--title {
  font-size: 1.7rem;
  font-weight: var(--fw-bold);
  color: var(--clr-neutral-main-heading);
  line-height: 2rem;
}

.pretty {
  color: var(--clr-primary-accent);
}

.card__content--text {
  margin-top: -0.5rem;
  line-height: 1.5rem;
}

.card__content--stats {
  margin-top: 1rem;
}

.stats-numbers {
  color: var(--clr-neutral-main-heading);
  font-weight: var(--fw-bold);
  font-size: 1.25rem;
  margin-bottom: 0.2rem;
}

.stats-text {
  font-family: var(--ff-special);
  text-transform: uppercase;
  font-size: 0.75rem;
  letter-spacing: 0.05rem;
}

.card__img {
  position: relative;
}

.card__img::after {
  position: absolute;
  content: "";
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  background-color: rgba(83, 0, 138, 0.5);
}

/* 新增600px-1024px区间的图片适配 */
@media (min-width: 600px) {
  .card__img--image {
    width: 100%;
  }
  .card__img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
}

@media (min-width: 1024px) {
  .card {
    grid-template-columns: 1fr 1fr;
  }
  .card__content {
    text-align: left;
    grid-row: 1;
    margin: 2rem;
    padding-right: 3.5rem;
  }
  .card__content--title {
    font-size: 2rem;
    line-height: 2.5rem;
  }
  .card__content--text {
    line-height: 1.5rem;
  }
  .flex-group {
    flex-direction: row;
    justify-content: space-between;
  }
}

/* footer */

footer {
  width: 100%;
}

.attribution {
  font-size: 11px;
  text-align: center;
}
.attribution a {
  color: hsl(228, 45%, 44%);
}

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

前端项目响应式问题求助：图片与Footer显示异常

一、600px-1024px区间图片无法拉伸的修复 #

问题根源 #

修复步骤 #

二、Footer无法固定在页面底部的修复 #

问题根源 #

修复步骤 #

修改后的完整代码 #

HTML代码 #

CSS代码 #

一、600px-1024px区间图片无法拉伸的修复

问题根源

修复步骤

二、Footer无法固定在页面底部的修复

问题根源

修复步骤

修改后的完整代码

HTML代码

CSS代码