如何让ASP.NET中图片按钮随背景图响应式保持位置与尺寸？

问题说明 #

我刚学习CSS，掌握得还不深。现在用ASP.NET写了一段代码，把BuyNow图片按钮放在背景图上方，想要屏幕尺寸变化时按钮能保持正确的响应式位置。现在位置差不多对，但按钮尺寸总是不对，该怎么调整？

现有ASP.NET代码 #

<div class="image-container">
    <asp:Image ID="ImgAddCoins" style="width:100%;" alt="Add Coins Background" runat="server" ImageUrl="~/files/images/addCoins.png" />
    <asp:ImageButton ID="ImgBtnCoinStack20" alt="Buy 20 Coins" runat="server" CommandArgument = "20" class="ppbutton"  OnClick="BuyCoins_Click" ImageUrl="~/files/images/icons/buttonBuy.png" />
</div>

现有CSS代码 #

.image-container {
  position: relative; 
  width: 100%;
}

.ppbutton {
  position: absolute;
  width: 50%;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 2; 
  color: #fff;
  border: none; 
  cursor: pointer; 
}

调整方案 #

针对按钮尺寸的适配问题，按下面几点修改即可：

• 限制按钮缩放范围：当前width:50%会让按钮跟着容器无限放大缩小，加个max-width和min-width就能控制按钮不会太大或太小，比如：

  .ppbutton {
    position: absolute;
    width: 50%;
    max-width: 220px; /* 按你按钮图的实际尺寸设置，比如按钮原图宽200px，留20px余量 */
    min-width: 100px; /* 小屏幕下按钮至少要这么宽，保证可点击 */
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 2; 
    cursor: pointer; 
    /* 删除无用样式：color和border对图片按钮无效，因为它是图片元素 */
  }
  

• 保持按钮宽高比：如果按钮需要固定比例（比如按钮图是2:1的宽高），加上height: auto就能让图片自适应缩放，不会变形。要是想强制固定比例，也可以用padding-top的方式：

  .ppbutton {
    position: absolute;
    width: 50%;
    max-width: 220px;
    min-width: 100px;
    height: auto; /* 保留图片原有比例 */
    /* 若要强制固定比例，可替换height: auto为以下代码：
    height: 0;
    padding-top: 50%; /* 2:1比例对应宽100%、高50% */
    background-image: url('~/files/images/icons/buttonBuy.png');
    background-size: cover;
    border: none; /* 用背景图需去掉按钮默认边框 */
    */
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 2; 
    cursor: pointer; 
  }
  

• 让容器高度更稳定：现在容器高度靠背景图片撑起来，要是图片加载慢或者尺寸不对，按钮位置可能跑偏。给容器加aspect-ratio匹配背景图的比例，就能让容器尺寸一直稳定，比如背景图是4:3的话：

  .image-container {
    position: relative; 
    width: 100%;
    aspect-ratio: 4/3; /* 和背景图的宽高比一致 */
    overflow: hidden;
  }
  .image-container img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* 图片填满容器，不会变形 */
  }
  

内容的提问来源于stack exchange，提问作者mark davies