如何在反应中设置背景图像内联样式的高度和宽度？

在 React 中，可以创建一个具有样式信息（如背景图像、高度、宽度等）的对象，并在 HTML 元素的 style 属性中引用该对象。由于内联 CSS 是在 JavaScript 对象中编写的，因此具有两个名称的属性（例如 background-color）必须使用驼峰式语法编写。

句法 ：

class MyHeader extends React.Component {
  render() {
    const mystyle = {
      backgroundColor: "white",
     // CSS CODE
     };
    return (
      

      
Hello Style!
      // All styling define in mystyle 
      // object will applied to h1 element.
      
    );
  }
}

示例 1：将 div 元素中背景图像的宽度和高度设置为 100% 和 200px 。

Javascript

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 (
    

     
 
       Geeks For Geeks 
     
     
 
       Set height and width of background
       image inline style react. 
     
  
    
  );
}
export default App;

输出：这里，myStyle 对象中定义的所有样式都适用于 div 元素。可以检查 div 元素中背景图像的宽度和高度是 100% 和 200px。

示例 2：将 div 元素中背景图像的宽度和高度设置为 20% 和 200px 。

Javascript

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 (
    

     
 
       Geeks For Geeks 
     
     
 
       Set height and width of background image
       inline style react. 
    
  
    
  );
}
export default App;

输出：这里，myStyle 对象中定义的所有样式都适用于 div 元素。可以查看 div 元素中背景图片的宽度和高度分别为 20% 和 200px。

注意：类似地，可以在一个对象中定义许多其他 CSS 样式，并在相应 HTML 元素的 style 属性中调用该对象。对象中定义的所有 CSS 样式都将应用于该特定 HTML 元素，如上例所示。