Как установить высоту и ширину встроенного стиля фонового изображения в React?

Опубликовано: 23 Декабря, 2021

В React можно создать объект с информацией о стилях, такой как фоновое изображение, высота, ширина и т. Д., И ссылаться на объект в атрибуте стиля в элементе HTML. Поскольку встроенный CSS написан в объекте JavaScript, свойства с двумя именами, например background-color, должны быть написаны с использованием синтаксиса верблюжьего регистра.

Синтаксис:

 class MyHeader расширяет React.Component {
  оказывать() {
    const mystyle = {
      backgroundColor: "белый",
     // КОД CSS
     };
    возвращение (
      <div>
      <h1 style = {mystyle}> Привет, стиль! </h1>
      // Все стили определяют в mystyle 
      // объект будет применен к элементу h1.
      </div>
    );
  }
}

Пример 1. Установите ширину и высоту фонового изображения в элементе div на 100% и 200 пикселей.

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 (
    <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 App; default 

Вывод: Здесь все стили, определенные в объекте myStyle, применимы к элементу div. Можно проверить, что ширина и высота фонового изображения в элементе div составляет 100% и 200 пикселей.

Пример 2: Установите ширину и высоту фонового изображения в элементе div на 20% и 200 пикселей.

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 (
    <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 App; default 

Вывод: Здесь все стили, определенные в объекте myStyle, применимы к элементу div. Можно проверить, что ширина и высота фонового изображения в элементе div составляет 20% и 200 пикселей.

Примечание. Аналогичным образом можно определить множество других стилей CSS в объекте и вызвать объект в атрибуте style соответствующего элемента HTML. Все стили CSS, определенные в объекте, будут применены к этому конкретному элементу HTML, как показано в приведенном выше примере.

React-js Picked Курсы ProductStar

Как установить высоту и ширину встроенного стиля фонового изображения в React?

Javascript

Javascript

РЕКОМЕНДУЕМЫЕ СТАТЬИ