Bootstrap按钮没有响应 - 没有正确调整大小

Question

我有一个带有关联按钮的图像，它会启动弹出窗口。当我在手机上测试时，按钮没有适当地重新调整图像大小。您可以通过查看下面或JSFiddle上的代码段并尝试调整屏幕大小来查看此内容。在调整大小时，您会看到图像和按钮不同步，但我不确定如何修复它。你能提供一些指导吗？

谢谢！

JSFiddle

OR

/* Isotope Items
---------------------------------- */

.filters {
  margin: 0 0 30px 0;
}
.filters .nav-pills > li {
  margin-right: 2px;
  margin-bottom: 2px;
}
.filters .nav-pills > li + li {
  margin-left: 0px;
}
.text-center.filters .nav-pills > li {
  margin-right: 2px;
  margin-left: 2px;
  margin-bottom: 2px;
  display: inline-block;
  float: none;
}
.isotope-container {
  overflow: hidden;
}
.isotope-item {
  margin-bottom: 20px;
}
.isotope-item .btn-default {
  color: #999999;
}
.isotope-item .btn-default:hover {
  color: #ffffff;
}
@media (max-width: 480px) {
  .filters .nav-pills > li {
    width: 100%;
    display: block;
  }
}
/* Images Overlay
----------------------------------------------------------------------------- */

.overlay-container {
  position: relative;
  display: block;
  overflow: hidden;
}
.overlay {
  position: absolute;
  top: 0;
  bottom: -1px;
  left: 0;
  right: -1px;
  background-color: rgba(85, 172, 238, 0.9);
  cursor: pointer;
  overflow: hidden;
  opacity: 0;
  filter: alpha(opacity=0);
  -webkit-transform: scale(0.8);
  transform: scale(0.8);
  -webkit-transition: all linear 0.2s;
  -moz-transition: all linear 0.2s;
  -ms-transition: all linear 0.2s;
  -o-transition: all linear 0.2s;
  transition: all linear 0.2s;
}
.overlay:hover {
  text-decoration: none;
}
.overlay span {
  position: absolute;
  display: block;
  bottom: 10px;
  text-align: center;
  width: 100%;
  color: #ffffff;
  font-size: 13px;
  font-weight: 300;
}
.overlay i {
  position: absolute;
  left: 50%;
  top: 50%;
  font-size: 18px;
  line-height: 1x;
  color: #ffffff;
  margin-top: -8px;
  margin-left: -8px;
  text-align: center;
}
.overlay-container:hover .overlay {
  opacity: 1;
  filter: alpha(opacity=100);
  -webkit-transform: scale(1);
  transform: scale(1);
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" rel="stylesheet" />
<div class="col-xs-6 col-sm-6 col-md-3 isotope-item bridesmaid">
  <div class="image-box">
    <div class="overlay-container">
      <img src="http://lorempixel.com/300/200/" alt="">
      <a class="overlay" data-toggle="modal" data-target="#project-1">
        <i class="fa fa-search-plus"></i>
        <span>Hover Info</span>
      </a>

    </div> <a class="btn btn-default btn-block" data-toggle="modal" data-target="#project-1">Person</a>

  </div>
</div>

Answer 1

请检查此链接它可能有帮助，我只需定义

img
{
width:100%;
}

Try Demo