如何创建一个响应图像，其中按钮/链接的响应宽度在图像中间

<div class="image-container"></div>

.image-container {
  width: 100%;
  height: auto;
  background-image: url('your-image.jpg');
  background-size: cover;
  background-position: center;
}

<div class="image-container">
  <a href="#" class="button">Button</a>
</div>

.button {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  padding: 10px 20px;
  background-color: #f00;
  color: #fff;
  text-decoration: none;
}

@media (max-width: 768px) {
  .image-container {
    width: 100%;
    height: auto;
  }
  
  .button {
    font-size: 14px;
    padding: 8px 16px;
  }
}