When I try to display images or videos in modal divs, they end up being taller than my screen size:
Here is my code snippet:
<div class="modal fade" id="showMedia" tabindex="-1" role="dialog"
aria-hidden="true">
<div class="modal-dialog modal-lg modal-dialog-centered"
role="document">
<div class="modal-content">
<div class="modal-body">
<div id="media" class="carousel slide" data-ride="carousel"
data-interval="false">
<div class="carousel-inner">
<div th:each="inst, iStat : ${instances}"
th:class="'carousel-item text-center ' + ${iStat.index == 0 ? 'active' : ''}">
<button type="button" class="close" data-dismiss="modal"
aria-label="Close">
<span aria-hidden="true">×</span>
</button>
<video
th:if="${inst.type} eq ${T(br.com.macrosul.stetho.entity.study.InstanceTypes).VIDEO}"
style="width: 100%;" controls preload="none">
<source
th:src="@{'/instances/' + ${inst.id} + '/file' + ${folder != null ? '?folder=' + folder.id : ''}}"
type="video/mp4">
</video>
<img
th:if="${inst.type} eq ${T(br.com.macrosul.stetho.entity.study.InstanceTypes).IMAGE}"
th:class="rs" alt="" style="width: 100%;"
th:src="@{'/instances/' + ${inst.id} + '/thumbnail' + ${folder != null ? '?folder=' + folder.id : ''}}"
th:data-src="@{'/instances/' + ${inst.id} + '/file' + ${folder != null ? '?folder=' + folder.id : ''}}">
</div>
</div>
</div>
</div>
</div>
</div>
</div>
Here is what I'm currently seeing: https://i.sstatic.net/5hJmR.jpg
I've set the image width to 100% hoping it would fit the screen, but that's not the case.