You need to enable JavaScript to run this app.
优惠活动
大模型
产品
解决方案
定价
更多

如何为.img-fluid类的背景图按屏幕尺寸设置不同规格图片？

avatar
API 探路者
2026-8-4
问题

我需要在CSS中为.img-fluid类根据不同屏幕尺寸切换不同规格的背景图，当前代码里该类固定使用桌面端背景图，希望通过媒体查询实现多设备适配，优化用户体验。

当前使用的CSS代码：

/* css style */

/* Import font from Google Fonts */
@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,700&family=Montserrat:wght@500;700&display=swap');

/* Box-sizing */
*, ::after, ::before {
    box-sizing: border-box;
}

/* Default display for div */
div {
    display: block;
}

/* Body styles */
body {
    margin: 0;
    font-family: var(--font-family-montserrat);
    font-size: var(--font-size-xl);
    font-weight: var(--font-medium-weight);
    line-height: 1.5;
    background-color: var(--cream);
    text-align: left;
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Custom properties */
:root {
    --dark-cyan: hsl(158, 36%, 37%);
    --cream: hsl(30, 38%, 92%);
    --dark-blue: hsl(212, 21%, 14%);
    --grayish-blue: hsl(228, 12%, 48%);
    --white: hsl(0, 0%, 100%);
    --breakpoint-xs: 0;
    --breakpoint-sm: 576px;
    --breakpoint-md: 768px;
    --breakpoint-lg: 992px;
    --breakpoint-xl: 1200px;
    --popup-box-shadow: 0 3px 40px rgba(172, 185, 220, 0.4);
    --font-medium-weight: 500;
    --font-bold-weight: 700;
    --font-size-xl: 14px;
    --heading-h5-size: 32px;
    --default-border-radius: 4px;
    --font-family-fraunces: 'Fraunces', serif;
    --font-family-montserrat: 'Montserrat', sans-serif;
}

/* HTML styles */
html {
    font-family: var(--font-family-montserrat);
    line-height: 1.15;
    text-size-adjust: 100%;
}

/* Margin bottom classes */
.mb-3, .my-3 {
    margin-bottom: 1rem !important;
}

/* Card styles */
.card {
    position: relative;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-direction: column;
    flex-direction: column;
    min-width: 0;
    word-wrap: break-word;
    background-color: #fff;
    background-clip: border-box;
    border: 1px solid rgba(0, 0, 0, .125);
    border-radius: 0.75rem;
}

/* Row styles */
.row {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    margin-right: -15px;
    margin-left: -15px;
}

/* Container styles */
.container {
    width: 100%;
    padding-right: 15px;
    padding-left: 15px;
    margin-right: auto;
    margin-left: auto;
    /* margin-top: 25%; margin-bottom: 25%; */
}

/* Column styles */
.col-md-6 {
    position: relative;
    width: 100%;
    padding-right: 15px;
    padding-left: 15px;
}

/* Card image styles */
.rounded-left {
    border-top-left-radius: 0.75rem !important;
    border-bottom-left-radius: 0.75rem !important;
}

.img-fluid {
    width: auto;
    height: auto;
    vertical-align: middle;
    border-style: none;
    background-image: url('./images/image-product-desktop.jpg');
    background-size: cover;
    background-position: center;
}

/* Card body styles */
.card-body {
    flex: 1 1 auto;
    padding: 1.25rem;
    color: var(--grayish-blue);
    font-family: var(--font-family-montserrat);
    font-size: var(--font-size-xl);
}

/* Paragraph styles */
p {
    margin-top: 0;
    margin-bottom: 0.8rem;
}

/* Card title styles */
.card-title {
    margin-bottom: 0.8rem;
    font-family: var(--font-family-fraunces);
    font-weight: var(--font-bold-weight);
    color: var(--dark-blue);
}

/* Heading styles */
.h5, h5 {
    font-size: var(--heading-h5-size);
}

.h3, h3 {
    font-size: 1.5rem;
}

.h1, .h2, .h3, .h4, .h5, .h6,
h1, h2, h3, h4, h5, h6 {
    margin-bottom: 0.5rem;
    font-weight: var(--font-bold-weight);
    line-height: 1.2;
}

h1, h2, h3, h4, h5, h6 {
    margin-top: 0;
    margin-bottom: 0.5rem;
}

/* Padding styles */
.pr-4 {
    padding-right: 1.5rem !important;
}


/* Card subtitle styles */
.card-subtitle {
    margin-top: -.375rem;
    padding-top: 10px;
    margin-bottom: 16px;
    text-transform: uppercase;
    letter-spacing: 6px;
    color: var(--grayish-blue);
    font-size: var(--font-medium-weight);
}

.card-text span.h3 {
    font-family: var(--font-family-fraunces);
    color: var(--dark-cyan);
}

.card-text span.strike {
    text-decoration: line-through;
    color: var(--grayish-blue);
    font-family: var(--font-family-montserrat);
}


[type=button]:not(:disabled),
button:not(:disabled) {
    cursor: pointer;
}

.btn-primary {
    color: var(--white);
    background-color: var(--dark-cyan);
}

button {
    overflow: visible;
    text-transform: none;
    margin: 0;
    font-family: inherit;
    font-size: inherit;
    line-height: inherit;
    border-radius: 0;
    appearance: button;
}

.btn-primary:hover {
    color: var(--white);
    background-color: var(--dark-cyan);
    border: 1px solid var(--dark-cyan);
}

.btn {
    display: inline-block;
    font-weight: var(--font-bold-weight);
    border: 1px solid var(--dark-cyan);
    text-align: center;
    vertical-align: middle;
    user-select: none;
    padding: 0.600rem 2.9rem;
    font-size: inherit;
    line-height: 1.5;
    border-radius: 0.5rem;
    transition: color .15s ease-in-out, background-color .15s ease-in-out, border .15s ease-in-out, box-shadow .15s ease-in-out;
}

img.icon {
    padding-right: 5px;
}

/***** End card button *****/

/* Media Queries */
@media (min-width: 576px) {
    .container {
        max-width: 540px;
    }
    

}

@media (min-width: 768px) {
    .container {
        max-width: 540px;
    }
}

@media (min-width: 992px) {
    .container {
        max-width: 580px;
    }
}

@media (min-width: 1200px) {
    .container {
        max-width: 580px;
    }
}

@media (max-width: 575.98px) {
    .col-md-6 {
        width: 100%;
    }
    
    .container {
        max-width: 340px;
    }

    .btn {
        padding: 0.600rem 5.5rem;
    }

    .h3,
    h3 {
        font-size: 2rem;
    }
}

@media (min-width: 576px) {
    .col-md-6 {
        width: 50%;
    }
}

当前使用的HTML代码：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <!-- displays site properly based on user's device -->

    <link
      rel="icon"
      type="image/png"
      sizes="32x32"
      href="./images/favicon-32x32.png"
    />

    <title>Frontend Mentor | Product preview card component</title>
    <link rel="stylesheet" href="style.css" />
  
    <!-- Feel free to remove these styles or customise in your own stylesheet 👍 -->
    <style>
      .attribution {
        font-size: 11px;
        text-align: center;
      }
      .attribution a {
        color: hsl(228, 45%, 44%);
      }
    </style>
  </head>
  <body>
    <div class="card container">
      <div class="row g-0">
        <div class="col-md-6 img-fluid rounded-left">
        </div>
        <div class="col-md-6">
          <div class="card-body">
            <p class="card-subtitle">Perfume</p>
            <h5 class="card-title">Gabrielle Essence Eau De Parfum</h5>
            <p class="card-text">
              A floral, solar and voluptuous interpretation composed by Olivier
              Polge, Perfumer-Creator for the House of CHANEL.
            </p>
            <p class="card-text">
              <span class="h3 pr-4">$149.99</span>
              <span class="strike">$169.99</span>
            </p>
            <div>
              <button class="btn btn-primary" href="#" role="button">
                <img
                    src="./images/icon-cart.svg"
                    alt=""
                    class="icon" />
                Add to Cart
              </button>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- <div class="attribution">
      Challenge by
      <a href="https://www.frontendmentor.io?ref=challenge" target="_blank"
        >Frontend Mentor</a
      >. Coded by <a href="#">Joseph</a>.
    </div> -->
  </body>
</html>
解决方案

要实现不同屏幕尺寸切换背景图，核心是利用媒体查询在指定断点重写.img-fluid的background-image属性，同时调整布局细节确保显示正常。

关键修改点：

  1. 优化基础.img-fluid样式：设置宽高为100%，让背景图填满容器，避免桌面端布局出现空隙
  2. 移动端媒体查询中替换背景图：在max-width: 575.98px的规则里，切换为移动端竖版图片，并设置固定高度（因为移动端容器无内容撑高）
  3. 调整移动端圆角样式：移动端是上下布局，图片应显示顶部左右圆角，而非左下圆角

修改后的完整CSS代码： 

/* css style */

/* Import font from Google Fonts */
@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,700&family=Montserrat:wght@500;700&display=swap');

/* Box-sizing */
*, ::after, ::before {
    box-sizing: border-box;
}

/* Default display for div */
div {
    display: block;
}

/* Body styles */
body {
    margin: 0;
    font-family: var(--font-family-montserrat);
    font-size: var(--font-size-xl);
    font-weight: var(--font-medium-weight);
    line-height: 1.5;
    background-color: var(--cream);
    text-align: left;
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Custom properties */
:root {
    --dark-cyan: hsl(158, 36%, 37%);
    --cream: hsl(30, 38%, 92%);
    --dark-blue: hsl(212, 21%, 14%);
    --grayish-blue: hsl(228, 12%, 48%);
    --white: hsl(0, 0%, 100%);
    --breakpoint-xs: 0;
    --breakpoint-sm: 576px;
    --breakpoint-md: 768px;
    --breakpoint-lg: 992px;
    --breakpoint-xl: 1200px;
    --popup-box-shadow: 0 3px 40px rgba(172, 185, 220, 0.4);
    --font-medium-weight: 500;
    --font-bold-weight: 700;
    --font-size-xl: 14px;
    --heading-h5-size: 32px;
    --default-border-radius: 4px;
    --font-family-fraunces: 'Fraunces', serif;
    --font-family-montserrat: 'Montserrat', sans-serif;
}

/* HTML styles */
html {
    font-family: var(--font-family-montserrat);
    line-height: 1.15;
    text-size-adjust: 100%;
}

/* Margin bottom classes */
.mb-3, .my-3 {
    margin-bottom: 1rem !important;
}

/* Card styles */
.card {
    position: relative;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-direction: column;
    flex-direction: column;
    min-width: 0;
    word-wrap: break-word;
    background-color: #fff;
    background-clip: border-box;
    border: 1px solid rgba(0, 0, 0, .125);
    border-radius: 0.75rem;
}

/* Row styles */
.row {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    margin-right: -15px;
    margin-left: -15px;
}

/* Container styles */
.container {
    width: 100%;
    padding-right: 15px;
    padding-left: 15px;
    margin-right: auto;
    margin-left: auto;
    /* margin-top: 25%; margin-bottom: 25%; */
}

/* Column styles */
.col-md-6 {
    position: relative;
    width: 100%;
    padding-right: 15px;
    padding-left: 15px;
}

/* Card image styles */
.rounded-left {
    border-top-left-radius: 0.75rem !important;
    border-bottom-left-radius: 0.75rem !important;
}

/* 优化基础.img-fluid样式，确保桌面端填满容器 */
.img-fluid {
    width: 100%;
    height: 100%;
    vertical-align: middle;
    border-style: none;
    background-image: url('./images/image-product-desktop.jpg');
    background-size: cover;
    background-position: center;
}

/* Card body styles */
.card-body {
    flex: 1 1 auto;
    padding: 1.25rem;
    color: var(--grayish-blue);
    font-family: var(--font-family-montserrat);
    font-size: var(--font-size-xl);
}

/* Paragraph styles */
p {
    margin-top: 0;
    margin-bottom: 0.8rem;
}

/* Card title styles */
.card-title {
    margin-bottom: 0.8rem;
    font-family: var(--font-family-fraunces);
    font-weight: var(--font-bold-weight);
    color: var(--dark-blue);
}

/* Heading styles */
.h5, h5 {
相关产品推荐
方舟 Agent Plan

超全模态模型 × Harness 升级，最新支持 Deepseek-V4.1-Flash、GLM-5.3 系列、Doubao-Seedream-5.0-pro、Kimi-K3 (部分)， 限时 9.9 元起

产品介绍相关文档
相关产品推荐
方舟 Agent Plan

超全模态模型 × Harness 升级，最新支持 Deepseek-V4.1-Flash、GLM-5.3 系列、Doubao-Seedream-5.0-pro、Kimi-K3 (部分)， 限时 9.9 元起

产品介绍相关文档
火山引擎 最新活动
全面开放
Doubao-Seedance-2.5全新模型升级

模型再升级,30秒超长叙事, 模态参考扩容

HOT
方舟Codingplan

模型自由，工具不限，最新支持 Deepseek-V4 系列、GLM-5.3 系列

HOT
方舟Agent plan

超全模态模型 × Harness 升级，最新支持 Deepseek-V4.1-Flash、GLM-5.3 系列

HOT
新用户特惠专场

大模型19元起，Al应用9.9元畅享，新人首购爆款尽享优惠

最近更新时间：2026.08.04 11:01:34