¿Cómo establecer la altura y el ancho del estilo en línea de la imagen de fondo en reaccionar?

En React, uno puede crear un objeto con información de estilo como imagen de fondo, alto, ancho, etc. y referirse al objeto en el atributo de estilo en el elemento HTML. Dado que el CSS en línea está escrito en un objeto de JavaScript, las propiedades con dos nombres, como color de fondo, deben escribirse con sintaxis de mayúsculas y minúsculas.

Sintaxis:

class MyHeader extends React.Component {
  render() {
    const mystyle = {
      backgroundColor: "white",
     // CSS CODE
     };
    return (
      <div>
      <h1 style={mystyle}>Hello Style!</h1>
      // All styling define in mystyle 
      // object will applied to h1 element.
      </div>
    );
  }
}

Ejemplo 1: establezca el ancho y el alto de la imagen de fondo en el elemento div en 100% y 200px.

import React from 'react';
import './App.css';
  
function App() {
  const myStyle={
    backgroundImage:"url(" +
"https://i.pinimg.com/474x/62/69/be/6269be179ab7d610b2a4959387fd77af.jpg"+")",
    width:'100%',
    height:'200px',
    };
  return (
    <div style={myStyle}>
     <h1 style={{color:'green'}}> 
       Geeks For Geeks 
     </h1>
     <p style={{color:'white'}}> 
       Set height and width of background
       image inline style react. 
     </p>
  
    </div>
  );
}
export default App;

Salida: Aquí, todo el estilo definido en el objeto myStyle es aplicable al elemento div. Uno puede verificar que el ancho y el alto de la imagen de fondo en el elemento div es 100% y 200px. 

Ejemplo 2: establezca el ancho y el alto de la imagen de fondo en el elemento div en 20% y 200px.

import React from 'react';
import './App.css';
  
function App() {
  const myStyle={
    backgroundImage:"url(" +
    "https://i.pinimg.com/474x/62/69/be/6269be179ab7d610b2a4959387fd77af.jpg"+")",
    width:'20%',
    height:'200px',
    };
  return (
    <div style={myStyle}>
     <h1 style={{color:'green'}}> 
       Geeks For Geeks 
     </h1>
     <p style={{color:'white'}}> 
       Set height and width of background image
       inline style react. 
    </p>
  
    </div>
  );
}
export default App;

Salida: Aquí, todo el estilo definido en el objeto myStyle es aplicable al elemento div. Uno puede verificar que el ancho y alto de la imagen de fondo en el elemento div es 20% y 200px. 

Nota: Del mismo modo, se pueden definir muchos otros estilos CSS en un objeto y llamar al objeto en el atributo de estilo del elemento HTML respectivo. Todos los estilos CSS definidos en el objeto se aplicarán a ese elemento HTML en particular, como se muestra en el ejemplo anterior.