html - 在 chrome 的 anchor 标记内只有部分图像是可点击的

Question

我有以下代码。只有部分图像是可点击的。

HTML

<div class="row">
  <div class="col-md-4 text-center">
    <div class="portfolio-item">
      <a>
        <img class="btn img-portfolio project-img-responsive" data-toggle="modal" data-target="#project-modal" src="img/map_image.jpg">
      </a>
    </div>
  </div>
</div>

CSS

.btn -> bootstrap CSS class
.row -> bootstrap CSS class
.col-md-4 -> bootstrap CSS class
.text-center -> bootstrap CSS class
.img-portfolio {
  margin: 0 auto;
}

.project-img-responsive {
    display: block;
    max-width: 50%;
    height: auto;
}
.portfolio-item {
  margin-bottom: 25px;
}

问题仅出在 chrome 上。在 mozilla 中运行良好。

我漏掉或弄错了什么属性？

Answer 1

你好尝试添加属性Href

<a href="#" >
    <img class="btn img-portfolio project-img-responsive" data-toggle="modal" data-target="#project-modal" src="img/map_image.jpg">
</a>

它对我有用。