Как сделать переменные размеры сетки в зависимости от разрешения? - PullRequest
Новая
       7

Как сделать переменные размеры сетки в зависимости от разрешения?

0 голосов
/ 18 октября 2019

Я делаю проект портфолио искусства, используя javascript / html / css. Я рендеринг всех изображений в моей базе данных на странице клиента ./pieces.html.

Проблема в том, что в зависимости от разрешения изображения я хочу, чтобы оно занимало больше места в строке, в которой оно находится.

, т. Е. Первое изображение на странице широкопоэтому я хочу, чтобы он занимал два пробела (начальная загрузка: col-md-6 вместо col-md-4)

Есть ли у кого-нибудь идеи о том, как динамически изменять размер изображения (или эскиза) на основеего аспектное разрешение?

изображение для справки : https://imgur.com/a2NHR0f

код: 

<div class="row text-center container-fluid" style="display:flex; flex-wrap:wrap">
    <% pieces.forEach(function(piece){ %>
        <div class="col-md-4 col-sm-12">
            <div class="thumbnail">
                  <div class="container">
                  <a href="/">
                    <img class="img-fluid" style="object-fit: contain;" src="<%= piece.image%>">
                  </a>
                    <div class="text_block">
                      <h4><%= piece.name %></h4>
                    </div>
                  </div>
                  <br>
            </div>
        </div>
    <% });%>
</div>
...