html - 在CSS中调整横幅的大小

我希望在CSS中得到这样的结果。


这是我目前的结果



如何获得与第一张图片相同的结果？
这是我的代码下面。

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

}

还有我的HTLM

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

</div>

谢谢

最佳答案

我不知道您写的是什么，但是请在具有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>

关于html - 在CSS中调整横幅的大小，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/52486939/