Изменить размер баннера в CSS

Question

Я бы хотел получить такой результат, например, в CSS.

Вот мой результат на данный момент

Как сделать, чтобы получить тот же результатчто за первое изображение?Вот ниже мой код.

.banner02{
  height: 100px;
  width: 100%;
  position: absolute;
  margin: 0px;

}

И мой HTLM

<div class="my_banner_reg">
        <img class="banner02" src="images/slider.jpg"/>

</div>

Спасибо

Answer 1

Я не знаю, что вы написали, но добавьте следующие стили к вашему элементу, которые имеют background-image:

header{
  width: 100%;
  height: 100px;
  background-image: url(http://trak.in/wp-content/uploads/2018/01/10-Rupees-Coins.jpg);
  background-size: cover;
  background-position: center;
}

<header></header>

И еще один способ:

div {
  width: 100%;
  height: 100px;
  overflow: hidden;
}

div > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

<div>
  <img src="http://trak.in/wp-content/uploads/2018/01/10-Rupees-Coins.jpg" />
</div>