Question

我正在尝试为网页制作横幅广告。我想创建一个只能在页面高度上查看20％页面的容器，然后其中的图像占用容器的100％。但是，图像最终会占用所有页面而不响应％更改。

Html代码：

<div class="banner">
<img src="img/header.jpg">
  </div>

CSS代码：

.banner {
  width: 100%;
  height: 20%;
}


.banner img {
  height : 100%;
  width: 100%;
}

Answer 1

如果您不想使用浮动横幅，您可以考虑更改样式：

.banner {
  width: 100%;
  height: 20vh;
}

vh =查看高度。 https://www.w3schools.com/cssref/css_units.asp。

如果您希望在页面滚动时跟随浮动横幅，请使用此选项：

.banner {
  width: 100%;
  height: 20vh;
  position:fixed;
}

Answer 2

您可以使用vh代替percentage横幅广告。 1vh = 1%

.banner {
  width: 100%;
  height: 20vh;
}


.banner img {
  height : 100%;
  width: 100%;
}

<div class="banner">
  <img src="http://via.placeholder.com/350x150">
</div>

Answer 3

您可以将图片设置为容器的背景，而不是使用<img>标记。

.banner{
background-image: url("/img/header.jpg");
}

Answer 4

你的.banner没有从css获得20％的高度。原因是它没有设置高度的父元素。所以我在height: 100%和html添加了body。试试下面的例子。

html,body{
  height: 100%;
}
.banner {
  width: 100%;
  height: 20%;
  background: green;
  font-size: 0;
}


.banner img {
  height : 100%;
  width: 100%;
}

<div class="banner">
  <img src="https://cdn.pixabay.com/photo/2015/12/13/09/42/banner-1090835_960_720.jpg">
</div>

响应式横幅HTML / CSS

4 个答案: