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

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

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

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

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

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

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

код:

 {amp}lt;div class="row text-center container-fluid" style="display:flex; flex-wrap:wrap"{amp}gt; {amp}lt;% pieces.forEach(function(piece){ %{amp}gt; {amp}lt;div class="col-md-4 col-sm-12"{amp}gt; {amp}lt;div class="thumbnail"{amp}gt; {amp}lt;div class="container"{amp}gt; {amp}lt;a href="/"{amp}gt; {amp}lt;img class="img-fluid" style="object-fit: contain;" src="{amp}lt;%= piece.image%{amp}gt;"{amp}gt; {amp}lt;/a{amp}gt; {amp}lt;div class="text_block"{amp}gt; {amp}lt;h4{amp}gt;{amp}lt;%= piece.name %{amp}gt;{amp}lt;/h4{amp}gt; {amp}lt;/div{amp}gt; {amp}lt;/div{amp}gt; {amp}lt;br{amp}gt; {amp}lt;/div{amp}gt; {amp}lt;/div{amp}gt; {amp}lt;% });%{amp}gt; {amp}lt;/div{amp}gt; 
Понравилась статья? Поделиться с друзьями:
JavaScript & TypeScript
Adblock
detector