如何在reactJS

Question

我能够获取标题容器的背景以显示图像。但是，我不知道如何设置背景图像的大小。因此，标题容器中显示的内容只是显示了太大而无法在标题容器中显示的图像。

我试图在线搜索 使用vh和vw更改容器的大小 使用内联样式

//App.js
import React from "react";
import NavBar from "./NavBar";

const ContactUs = () => {
    return(
        <div className="contactUsContainer">
            <NavBar/>
            <div className="contactUsHeader">
                <h2>Contact Us</h2>
            </div>
            <div>
                <span></span>
            </div>
        </div>
    );
}

export default ContactUs;


//app.css

.contactUsContainer {
  height: 100%;
  width: 100%
}

.contactUsHeader {
  display: flex;
  flex-direction: column;
  align-items: center;
  background-image: url("http://www.stapl.co.in/sites/default/files/imagecache/full-zoom/files/projects/6/83/6-83-wartsilla-3.jpg");
  background-repeat: no-repeat;
  background-size: cover;
  height:30vh;
  width: 100vw;
  background-color: blue

}

预期结果：背景图片以较小的尺寸显示完整图片

实际结果：背景图片显示很大，忽略了大部分图片内容

Answer 1

在没有任何脏JS的情况下，您能做的最好的事情是：

background-size: cover;
background-position: center;

然后，您只需要为图像选择合适的比例