Нужно сделать невидимую кнопку для нанесения изображения, которое будет отзывчивым. Я нашел часть ответа в # 56065709

Question

Нужна отзывчивая, невидимая кнопка, чтобы оставаться сверху изображения.

Ответ # 56065709 помог мне начать работу.

JSFiddle

.img-wrapper {
  position: relative;
}

.img-responsive {
  width: 100%;
  height: auto;
}

.img-overlay {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  text-align: center;
}

.img-overlay:before {
  content: ' ';
  display: block;
  /* adjust height to position overlay content vertically */
  height: 75%;
}

.btn-responsive {
  /* matches btn-md */
  padding 10px 16px;
  font-size: 18px;
  line-height: 1.3333333;
  border-radius: 6px;
}

@media (max-width:760px) {
  /* matches btn-xs */
  .btn-responsive {
    padding: 1px 5px;
    font-size: 12px;
    line-height: 1.5;
    border-radius: 3px;
  }
}

<div class="img-wrapper">
  <img class="img-responsive" src="https://avatar.amuniversal.com/user_avatars/avatars_gocomicsver3/3064000/3064497/rat.jpg" alt="" class="opt_center2 img-responsive">
  <div class="img-overlay">
    <button class="btn btn-md btn-success"></button>
  </div>
</div>

Answer 1

Если я правильно понял, вы хотите, чтобы кнопка растягивалась поверх изображения.Если это так, просто добавьте стиль к элементу button следующим образом:

  button: {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    background: rgba(0,0,0,0);
    border: none;
  }