React中如何让背景图片适配指定尺寸的Div容器

你当前的问题是使用backgroundSize: 'contain'导致图片无法填满容器，出现留白。要实现图片适配容器的效果，只需调整背景样式的几个属性：

修改后的代码 #

import React from 'react'

function OurCourse() {
  return (
    <div className='w-full'>
        <div className='w-full h-[390px]' style={{
            backgroundImage:'url(https://images.unsplash.com/photo-1532012197267-da84d127e765?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=387&q=80)',
            backgroundSize:'cover',
            backgroundRepeat:'no-repeat',
            backgroundPosition: 'center',
        }}>
            {/* 可在此添加文本内容 */}
        </div>
    </div>
  )
}

export default OurCourse 

关键修改说明 #

• 替换backgroundSize属性：把contain改成cover。cover会让图片按原始比例缩放，完全覆盖整个容器，超出容器的部分会被自动裁剪，刚好匹配你想要的填满容器的效果；而contain是优先保证图片完整显示，所以会在容器内留下空白区域。
• 添加backgroundPosition: 'center'：让图片在容器中居中定位，避免裁剪时丢失图片的核心视觉区域。

如果你的需求是图片完全拉伸填满容器（不保留原始比例），可以将backgroundSize设为'100% 100%'，但这种方式会导致图片变形，仅建议在特殊场景下使用。

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