Установите ширину фона (из img) в «cover» в JSX

Question

Я ищу способ установить ширину моего изображения в 'cover' (в CSS: background-size: cover;) .

Есть некоторые lib есть, так что вы можете использовать CSS в вашем jsx-файле, однако я бы хотел этого избежать.

Например, изображение, покрывающее всю строку:

Answer 1

Добавить родителя к этому <img/> вот так.

JSX:

<div className="img-container">
   <img src={image}/>
</div>

CSS:

.img-container{
   position: absolute;
   left: 0;
   top: 0;
   width: 100vw;
   height: 100vh; // or how much you want
}

.img-container img{
   height: 100%;
   width: 100%;
   object-fit: cover;
}

Answer 2

Поместите это в тег изображения:

style = {{backgroundSize: "cover"}}

JSX имеет другой анализатор, чем css, поэтому замените все '-' на camelcase при укладке