Как определить размер divs с тимелией? - PullRequest
Новая
       111

Как определить размер divs с тимелией?

0 голосов
/ 19 марта 2020

Итак, у меня есть div со списком div, внутри которого есть изображения и видео. Мне нужно, чтобы они были одинакового размера (квадрат с одинаковым размером был бы хорош). Потому что теперь все это выровнено

Это то, что я пробовал до сих пор: 

<div class="row text-center text-lg-left">
                        <div th:each="inst, iStat : ${instances}" class="col-lg-3 col-md-4 col-6"
                            th:if="${inst.fileStatus} eq ${T(br.com.macrosul.stetho.entity.FileStatus).UPLOADED}">
                            <a href="#" class="d-block mb-4 h-100">
                                <img class="img-fluid img-thumbnail" data-target="#showMedia" data-toggle="modal" th:data-slide-to="${iStat.index}"
                                    style="width: 100%;" th:src="@{'/instances/' + ${inst.id} + '/thumbnail' + ${folder != null ? '?folder=' + folder.id : ''}}" alt="">
                            </a>
                        </div>
                    </div>

Это пространство будет поддерживать, вероятно, 5 изображений, и вот как это выглядит сейчас: current behavior

Среднее - это видео.

Мне также нужно что-то, чтобы различать guish между видео и фотографиями, как я могу указать, что это видео? Можно ли прикрепить «кнопку воспроизведения» перед ней?

1 Ответ

1 голос
/ 19 марта 2020

Я думаю, что это больше вопрос CSS, чем вопрос Thymeleaf. Но вот один подход, который может вам помочь.

Этот подход основан на деталях в этом вопросе .

В следующем шаблоне Thymeleaf предполагается, что вы хотите отобразить пять идентично- квадраты размером в ряд, с изображением (или видео) в каждом квадрате: 

<!doctype html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
    <head>
        <meta charset="utf-8">
        <title>Grid Demo</title>

        <style>

            <!-- included just for reference 
            div.three {
                float: left;
                position: relative;
                width: 29%;
                padding-bottom: 29%;
                margin: 1.7%;
                border: 1px solid grey;
            }
            div.four {
                float: left;
                position: relative;
                width: 22%;
                padding-bottom: 22%;
                margin: 1%;
                border: 1px solid grey;
            }
            -->

            <!-- five squares in a horizontal row -->
            div.five {
                float: left;
                position: relative;
                width: 17%;
                padding-bottom: 17%;
                margin: 1.1%;
                border: 1px solid grey;
            }

            div.content {
                position: absolute;
                height: 80%;
                width: 90%;
                padding: 10% 5%;
            }

            div.table {
                display: table;
                height: 100%;
                width: 100%;
            }

            div.table-cell {
                display: table-cell;
                vertical-align: middle;
            }

            .content .rs {
                width: auto;
                height: auto;
                max-height: 90%;
                max-width: 100%;
            }

        </style>
    </head>

    <body>

        <div th:each="inst, iStat : ${instances}" class="five">
            <div class="content">
                <div class="table">
                    <div class="table-cell">
                        <img class="rs" th:attr="src=${inst}"/>
                    </div>
                </div>
            </div>
        </div>

    </body>

В моем случае конечный результат выглядит по ширине экрана моего браузера следующим образом:

Five squares

Примечания:

1) Если вы хотите динамически отображать 3, 4 или 5 полей, вы можете параметризовать class="five" атрибут в шаблоне Thymeleaf. размер объекта ${instances} скажет вам, какой класс вам нужен: 

${#lists.size(instances)}

2) Если вы хотите добавить элементы управления видео в квадрат, это потребовало бы передачи объекта Thymeleaf, который содержит не только имя файла мультимедиа, но и логическое (или аналогичное), чтобы указать, является ли мультимедиа воспроизводимым. Добавьте такой контент в свой собственный <div>, следуя соответствующему тегу <img>: 

<div th:if="${isVideo}">...</div>

Надеюсь, это даст вам некоторые идеи.

...