时间戳

首页 > 解决方案 > 带有组件的背景大小

css - 带有组件的背景大小

问题描述

我现在有这个非常简单的组件，它负责在屏幕上渲染图片。图片大小不一样，所以我创建了一个 100% 宽和 300 像素高的容器。我希望图像适合而不被拉伸。如果您使用 CSS 的 background-size 属性并在 CSS 中加载图像，则非常容易。但我从 React 组件渲染图像有点像这样：

export default function Theme({theme}) {
    return (
        <div className='themeContainer'>   
             <img  className="headerImage" src={theme.headerImg} />
        </div>
    )
}

我的css类是这样的：

.themeContainer {
  margin : 3em 0 0 0 ;
  padding : 10px;
  width : 100%;
  height: 300px;
}
.themeContainer .headerImage{
  background-size: cover;
  
}

在这种特殊情况下，我无法使用背景大小来处理图片。

标签： cssreactjsbackground-size

解决方案

推荐阅读