Question

这是我的HTML代码：

  <div class="choice">

      <div class="choiceone">
          <a href="#two"><img src="images/choiceone.png" alt="titlef"></a>
      </div>

      <div class="choicetwo">
          <a href="#three"><img src="images/choicetwo.png" alt="titlev"></a>
     </div> 

  </div>

CSS

 .choice { 
     display: flex; 
     justify-content: space-around; 
     margin-top: 36%; 
     margin-bottom: 10%; 
     max-width: 100%; 
     height: auto; 
     position: static; }

这两个选项是图像作为按钮，单击时，作为跳转链接到页面的另一部分。我已插入max-width:100和height: auto，甚至仅尝试了width:100%; height:auto，但它似乎仍无效。图像不随着浏览器的最小化而移动。

Here is the published version of my site.

查看上面发布的版本，您可以看到两个图像不与页面中的其他元素一起移动。我该如何解决？

Answer 1

在#one移除padding-top: 20%;并将高度更改为height: 100%;，并将位置更改为position: absolute;

同样在.choice课程中，移除margin-top: 26%;并添加以下内容：

top: 90%;
position: relative;

Answer 2

设置removeFlags(int)和height: 100%。

另外，为什么不将width: auto放入两个PNG（FRUITS / VEGGIES）中，这样你就不必将两个img与位置相匹配

underline

Answer 3

将#one元素的背景图像定位到中心

＆＃13;

#one {
  font-family: 'Poppins', sans-serif;
  text-align: center;
  background-image: url(../images/Backgroundgif.gif);
  background-size: cover;
  height: 100vh;
  background-position: center;
}

＆＃13;

为什么图像不随着浏览器而缩小？

3 个答案: