在CSS中调整横幅的大小

Question

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

这是我现在的结果

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

IntVector

还有我的HTLM

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

}

谢谢

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>