크롬의 앵커 태그 안에서 img의 일부만 클릭 가능합니다

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; 
} 

에만 문제가 크롬이다. 모질라에서 잘 작동합니다.

내가 누락되었거나 잘못 되었나요? 안녕하세요 추가하려고

Answer 1

은 나와 함께 작동

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

href 속성.

Answer 2

앵커 요소에 display: inline-block을 추가하려고하면 @ DStruOne의 제안이 작동하지 않습니다. 모달를 트리거 할 경우

a { display: inline-block; } 

Answer 3

, 어쩌면 앵커 태그에

data-toggle="modal" data-target="#project-modal" 

이동합니다. 제 생각에는 이미지에 '.btn'클래스를 추가하면 안됩니다. 태그를 앵커 태그로 옮겨보십시오.