Question

我正在创建一个博客，并且试图在导航栏下方获得一个图像。我有四个使用css和js滑动的图像。但是，无论我如何尝试，都无法使图像跨越页面的宽度。我已经尝试了100％的宽度，vw等。但我没有想要的方法。这是html和css（请记住，我一直在和css一起玩）

 #stage {
margin: 1em auto;
width: 100%;
height: 292px;
margin-bottom: 40px;
}

#stage a {
    position: absolute;
  }
  #stage a img {
    padding: 10px;
    border: 1px solid #ccc;
    background: #fff;
  }

  #stage a:nth-of-type(1) {
    animation-name: fader;
    animation-delay: 4s;
    animation-duration: 1s;
    z-index: 20;
  }
  #stage a:nth-of-type(2) {
    z-index: 10;
  }
  #stage a:nth-of-type(n+3) {
    display: none;
  }

  @keyframes fader {
    from { opacity: 1.0; }
    to   { opacity: 0.0; }
  }

这是html

<div id="stage">
<a><%= image_tag "2.jpeg" %></a>
<a><%= image_tag "1.jpeg" %></a>
<a><%= image_tag "3.png" %></a>
<a><%= image_tag "4.jpeg" %></a>
</div>

Answer 1

希望这会有所帮助。我已经记录了CSS代码中的更改。但是请注意，根据实际图像，它可能会超出比例。

#stage {
  margin: 1em auto;
  width: 100%;
  height: 292px;
  margin-bottom: 40px;
}

#stage a {
  position: absolute;
  width: inherit; /* Added */
  height: inherit; /* Added */
}

#stage a img {
  padding: 10px;
  border: 1px solid #ccc;
  background: #fff;
  width: inherit; /* Added */
  height: inherit; /* Added */
}

#stage a:nth-of-type(1) {
  animation-name: fader;
  animation-delay: 4s;
  animation-duration: 1s;
  z-index: 20;
}

#stage a:nth-of-type(2) {
  z-index: 10;
}

#stage a:nth-of-type(n+3) {
  display: none;
}

@keyframes fader {
  from {
    opacity: 1.0;
  }
  to {
    opacity: 0.0;
  }
}

<div id="stage">
  <a>
    <img src="https://via.placeholder.com/100x100/000000">
  </a>
  <a>
    <img src="https://via.placeholder.com/100x100/ff0000">
  </a>
  <a>
    <img src="https://via.placeholder.com/100x100/00ff00">
  </a>
  <a>
    <img src="https://via.placeholder.com/100x100/0000ff">
  </a>
</div>

试图让我的横幅图像跨越页面的宽度

1 个答案: