Как настроить размер div на моем экране?

Question

У меня есть несколько модальных div для отображения изображений или видео, но когда я расширяю эти изображения, он становится больше, чем размер моего экрана:

Мой код:

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

текущий результат:

Я установил ширину изображения на 100%, ожидая, что оно уместится на экране, но этого не происходит.

Answer 1

Установка ширины означает, что если изображение выше, чем оно шире, оно будет больше, чем страница. Вам лучше всего установить max-height:100vh (100% высоты окна просмотра)