Как установить свойства фонового изображения в ReactionJS

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;

Тогда вам просто нужно выбрать правильное соотношение для вашего изображения