bootstrap4 modal responsive image 이슈

부트스트랩 사용하여 모달사용시 반응형으로 웹과 모바일이미지를 분기하여 보여줄경우, 

IE 에서 이미지는 줄어들지만 부모 div의 높이가 최대값으로 고정되는 이슈 발생.

위와같이 부모div (.modal-body)가 함께줄어들지않고 이미지만 줄어드는 현상이 발생했다.

webkit 엔진 브라우저에서는 문제가 없었다.

부트스트랩에서 제공해주는 class가 있는진 모르겠으나, max-height와 overflow속성으로 일단 해결했다..

<!-- Modal body -->
<div class="modal-body" style="max-height:1366px;overflow:auto;">
    <img src="./img/m/pop_event.jpg" class="d-block d-md-none h-auto" alt="이벤트 팝업 모바일이미지"/>
    <img src="./img/pop_event.jpg" class="d-none d-md-block h-auto" alt="이벤트 팝업 웹이미지"/>

    <div class="chk-area">
        <input type="checkbox" id="inp_today"><label for="inp_today">오늘 하루 열지 않기</label>
    </div>
</div>

위와같이 .modal-body에 max-height를 이미지 원본 높이만큼주고, overflow를 지정해주면,

modal-body가 함께줄어들어서 해결되긴 한다..