为什么图像不随浏览器一起缩小？答案

【问题标题】：Why image is not shrinking along with brower?为什么图像不随浏览器一起缩小？
【发布时间】：2017-05-23 13:03:45
【问题描述】：

这是我的 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.

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

【问题讨论】：

你能把你的css代码贴在这里吗？
@DanielH .choice { display: flex; justify-content：空间环绕；利润率最高：36%；保证金底部：10%；最大宽度：100%；高度：自动；位置：静态； }

标签： html css media-queries

【解决方案1】：

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

同样在您的 .choice 类中，删除 margin-top: 26%; 并添加以下内容：

top: 90%;
position: relative;

【讨论】：

【解决方案2】：

设置height: 100% 和width: auto。

另外，为什么不将underline 放入这两个 PNG（水果/蔬菜）中，这样您就不必将两个 img 与位置匹配

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

【讨论】：

【解决方案3】：

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

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

【讨论】：