Заполните div фон с отзывчивым изображением

Question

Я пытаюсь разместить изображение в качестве фона div и изменить его размер при изменении размера окна.

Реагировать компонент:

import React from 'react';

const Test = () => {
  return (
   <div className="img-fluid test">
    <br/> // if I add this tag then part of the image is shown
    <br/> // if I add another one, then image is shown even more! still not entire 
   </div>
  )
}

export default Test;

Маршрут:

<Route path="/test" exact component={Test}/>

Css:

.test {
  width: 100%;
  height: auto;
  background: url('/images/1.jpg') no-repeat;
}

При посещении http://localhost:3000/test ничего не отображается.Что я делаю не так?

Заранее спасибо.

Answer 1

Попробуйте что-то вроде этого ...

background-image: url('/images/1.jpg');
background-repeat: no-repeat;
background-size: cover;
background-position: center;
height: 100vh;
width: 100%;

Вам также необходимо указать явную высоту и ширину.Авто НЕ будет работать.10em как раз для примера, поэтому установите его так, как вам нужно.Фоновые изображения не растягивают div, чтобы соответствовать их размеру.