如何使 div 适合我的屏幕高度？

Question

I have some modal divs to display images or videos, but when I expand these images it gets higher than my screen size:

My code:

<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="Fechar">
                                            <span aria-hidden="true">&times;</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>

current result:

I've set width of image as 100% expecting it to fit on the screen size, but it doesn't happen.

Answer 1

Setting the width means that if the image is taller than it is wider it will be bigger than the page. You'd be best setting max-height:100vh (100% of the viewport height)