Нужна фиксированная пропорция сетки со смешанными соотношениями img в начальной загрузке 4 бета-столбцов

Я обновляю сайт HTML/CSS, который я создал несколько лет назад, на сайт с начальной загрузкой 4 и столкнулся с проблемой способа отображения изображений в столбцах.
Для справки предлагаю оригинальный сайт: http://perpetuairon.com/simple-functional-railing.html

То, что я хочу сохранить, - это то, как поля сетки имеют фиксированные соотношения независимо от размера изображения внутри. Это позволяет горизонтальным изображениям быть шире вертикальных, чтобы они не были крошечными. Это в основном квадрат с какой-то комнатой внизу для подписей.

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

Пока что я могу отобразить систему сетки тремя способами, я попытался ограничить код тем, что имеет отношение:

1. Поместите изображения в столбцы с прямоугольником, который проходит вокруг изображений, и каждый столбец имеет высоту, равную самому высокому содержанию в этой "строке", показанной здесь (проблема в том, что при этом пропускаются два столбца изображений, скачок с 4 до 1.: http://perpetuairon.com/bootstrap4-site/railing-all.html

  .eq-ho {
    border: 1px solid #444;
    padding: .4em;
    margin: .5em;}

    .hide {
    /**hides link on mobile devices**/
    }

    @media all and (max-width: 768px) {
    .hide {
        pointer-events: none;
        cursor: default;
    }}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

    <div class="container-fluid">
                <div class="row  d-flex justify-content-center ">
                    <div class="col-sm-12 col-md-6 col-lg-3 col-xl-2 d-flex align-items-center justify-content-center eq-ho  text-center">
                      
                            <a href="http://perpetuairon.com/images/railing/simple-or-functional/railing-08.1.jpg" class="hide" data-toggle="lightbox" data-gallery="testgallery" data-footer="Simple Railing 08.1">
                                <img src="http://perpetuairon.com/images/railing/simple-or-functional/railing-08.1.jpg" class="img-fluid  " alt="blah blah blah"> 
                                <br>
                                <p class="text-dark">Simple Railng 08.1</p></a>
                                 
                    </div>
                    <div class="col-sm-12 col-md-6 col-lg-3 col-xl-2 d-flex align-items-center justify-content-center eq-ho  text-center">
                        <a href="http://perpetuairon.com/images/railing/simple-or-functional/railing-09.3.jpg" class="hide" data-toggle="lightbox" data-gallery="testgallery" data-footer="Simple Railing 09.3">
                            <div class="eq-ht">
                                <img src="http://perpetuairon.com/images/railing/simple-or-functional/railing-09.3.jpg" class="img-fluid">
                                <br>
                                <p class="text-dark"> Simple Railing 09.3</p>
                            </div>
                        </a>
                    </div>
                    <div class="col-sm-12 col-md-6 col-lg-3 col-xl-2 d-flex align-items-center justify-content-center eq-ho  text-center">
                        <a href="http://perpetuairon.com/images/railing/decorative-or-sculptural/railing-1.2.jpg" class="hide" data-toggle="lightbox" data-gallery="testgallery" data-footer="Sculptural Railing 1.2">
                            <img src="http://perpetuairon.com/images/railing/decorative-or-sculptural/railing-1.2.jpg" class="img-fluid" alt="blah blah blah">
                            <br>
                            <p class="text-dark">Sculptural Railing 1.2</p>
                        </a>
                    </div>
                  
                    
                
                </div>
            </div>

2. (Я думаю, это выглядит лучше) Положите изображения в плотные рамки, которые не соответствуют самой высокой высоте, как показано здесь. (решает пропуск от одного до 4 столбцов, по крайней мере): http://perpetuairon.com/bootstrap4-site/sculptural-railing.html

.eq-ho {
  border: 1px solid #444;
  padding: .4em;
  margin: .5em;
}

.hide {
  /**hides link on mobile devices**/
}

@media all and (max-width: 768px) {
  .hide {
    pointer-events: none;
    cursor: default;
  }
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container-fluid">
  <div class="row  d-flex justify-content-center">
    <div class="col-sm-12 col-md-6 col-lg-3 col-xl-2 align-self-center text-center ">
      <a href="http://perpetuairon.com/images/railing/decorative-or-sculptural/railing-1.2.jpg" class="hide" data-toggle="lightbox" data-gallery="testgallery" data-footer="Sculptural Railing 1.2">
        <img src="http://perpetuairon.com/images/railing/decorative-or-sculptural/railing-1.2.jpg" class="img-fluid eq-ho" alt="blah blah blah">
        <br>
      </a>
      <p class="text-dark">Sculptural Railing 1.2</p>
    </div>
   
    <div class="col-sm-12 col-md-6 col-lg-3 col-xl-2 align-self-center text-center ">
      <a href="http://perpetuairon.com/images/railing/decorative-or-sculptural/railing-2.1.jpg" class="hide" data-toggle="lightbox" data-gallery="testgallery" data-footer="Sculptural Railing 2.1">
        <img src="http://perpetuairon.com/images/railing/decorative-or-sculptural/railing-2.1.jpg" class="img-fluid eq-ho" alt="blah blah blah">
        <br>
      </a>
      <p class="text-dark">Sculptural Railing 2.1</p>
    </div>
    <div class="col-sm-12 col-md-6 col-lg-3 col-xl-2 align-self-center text-center">
      <a href="http://perpetuairon.com/images/railing/decorative-or-sculptural/railing-2.3.jpg" class="hide" data-toggle="lightbox" data-gallery="testgallery" data-footer="Sculptural Railing 2.3">
        <img src="http://perpetuairon.com/images/railing/decorative-or-sculptural/railing-2.3.jpg" class="img-fluid eq-ho" alt="blah blah blah">
        <br>
      </a>
      <p class="text-dark">Sculptural Railing 2.3</p>
    </div>
  </div>
</div>

3. позвольте изображениям и содержимому зависать на открытом воздухе, что не является целью, но является единственным вариантом, который варьируется от 4 столбцов до 2, к 1. Пример: http://perpetuairon.com/bootstrap4-site/simple-railing.html

Я также попытался использовать: "embed-responseive embed-responseive-4by3" в моих cols, которое работало, чтобы заставить соотношение col, но изображения были обрезаны, чтобы соответствовать. Я попытался добавить фоновое изображение в col, в div внутри col, но без изменений.

Я ценю любые предложения и, надеюсь, этот пост не слишком длинный.

Добавление возможного решения: добавление этого правила CSS к стилю больших изображений: ширина:80% Это помогает, но неуклюже и не решает проблему с укладкой.

.eq-ho {
    border: 1px solid #444;
    padding: .4em;
    margin: .5em;}

    .hide {
    /**hides link on mobile devices**/
    }

    @media all and (max-width: 768px) {
    .hide {
        pointer-events: none;
        cursor: default;
    }}
    
    .tall{width:80%;}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

    <div class="container-fluid">
                <div class="row  d-flex justify-content-center ">
                    <div class="col-sm-12 col-md-6 col-lg-3 col-xl-2 d-flex align-items-center justify-content-center eq-ho  text-center">
                      
                            <a href="http://perpetuairon.com/images/railing/simple-or-functional/railing-08.1.jpg" class="hide" data-toggle="lightbox" data-gallery="testgallery" data-footer="Simple Railing 08.1">
                                <img src="http://perpetuairon.com/images/railing/simple-or-functional/railing-08.1.jpg" class="img-fluid tall " alt="blah blah blah"> 
                                <br>
                                <p class="text-dark">Simple Railng 08.1</p></a>
                                 
                    </div>
                    <div class="col-sm-12 col-md-6 col-lg-3 col-xl-2 d-flex align-items-center justify-content-center eq-ho  text-center">
                        <a href="http://perpetuairon.com/images/railing/simple-or-functional/railing-09.3.jpg" class="hide" data-toggle="lightbox" data-gallery="testgallery" data-footer="Simple Railing 09.3">
                            <div class="eq-ht">
                                <img src="http://perpetuairon.com/images/railing/simple-or-functional/railing-09.3.jpg" class="img-fluid">
                                <br>
                                <p class="text-dark"> Simple Railing 09.3</p>
                            </div>
                        </a>
                    </div>
                    <div class="col-sm-12 col-md-6 col-lg-3 col-xl-2 d-flex align-items-center justify-content-center eq-ho  text-center">
                        <a href="http://perpetuairon.com/images/railing/decorative-or-sculptural/railing-1.2.jpg" class="hide" data-toggle="lightbox" data-gallery="testgallery" data-footer="Sculptural Railing 1.2">
                            <img src="http://perpetuairon.com/images/railing/decorative-or-sculptural/railing-1.2.jpg" class="img-fluid" alt="blah blah blah">
                            <br>
                            <p class="text-dark">Sculptural Railing 1.2</p>
                        </a>
                    </div>
                  
                    
                
                </div>
            </div>

Источник

1 ответ

Решение

Я понял! Мне пришлось отказаться от всего подхода и перейти на карты. Я не могу сделать так, чтобы фрагмент stackru отображал прозрачный фон на картах, но он работает на моем загрузочном листе. https://www.bootply.com/CdtiPb0WIQ

Реальный трюк заключался в добавлении к карте div-тела карты (с дисплеем:flex; align-items:center; class) (с классом h-100)

Мне нужно будет вручную добавить класс к портретно-ориентированным изображениям и добавить к ним все отступы. Это просто тратит немного места на экране телефона, но при этом сохраняет первоначальный внешний вид сайтов, что и было тем, к чему я стремился.

/* CSS used here will be applied after bootstrap.css */


.vert-c{ 
display: flex;
    align-items: center;
justify-content: center;
}

.narrow-body{
  padding-left:.6em;
    padding-right:.6em;}


.lrp{
    padding-left:2em;
  padding-right:2em;
}


  .hide {
    /**hides link on mobile devices**/
}

@media all and (max-width: 768px) {
    .hide {
        pointer-events: none;
        cursor: default;
    }
}
.c-clean{
  background:transparent;
      background-image: url("http://perpetuairon.com/bootstrap4-site/images/site/transpng.png");
      background-repeat:no-repeat;
-webkit-background-size:cover;
-moz-background-size:cover;
-o-background-size:cover;
background-size:cover;
background-position:center;
    border-color:#666;
  
    }
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="container-fluid" style="background: #373232 url(http://perpetuairon.com/images/site/ltbackground.jpg)">
  <div class="style padding-top:15px;"> &nbsp;   </div>            
  <div class="row d-flex justify-content-center ">
                    <div class="col-sm-12 col-md-6 col-lg-3 col-xl-2 mb-3 nm text-center">
                       <div class="card c-clean h-100">
                         <div class="card-body narrow-body vert-c hide ">
<a href="http://perpetuairon.com/images/railing/decorative-or-sculptural/railing-1.2.jpg" class="hide" data-toggle="lightbox" data-gallery="testgallery" data-footer="Sculptural Railing 1.2">
                            <img src="http://perpetuairon.com/images/railing/decorative-or-sculptural/railing-1.2.jpg" class="img-fluid " alt="blah blah blah">
                            <br>
                           </a></div>
                        <p class="text-light">Sculptural Railing 1.2</p>
                         
                         </div>
                  </div>
                    <div class="col-sm-12 col-md-6 col-lg-3 col-xl-2 mb-3 nm text-center ">
                      <div class="card c-clean h-100">
                        <div class="card-body narrow-body vert-c hide ">
                        <a href="http://perpetuairon.com/images/railing/decorative-or-sculptural/railing-1.7.jpg" class="hide" data-toggle="lightbox" data-gallery="testgallery" data-footer="Sculptural Railing 1.7">
                          <img src="http://perpetuairon.com/images/railing/decorative-or-sculptural/railing-1.7.jpg" class="img-fluid " alt="blah blah blah"> </a></div>
                             <p class="text-light">Sculptural Railing 1.7</p>
                       
                       
                    </div>
                  </div>
                    <div class="col-sm-12 col-md-6 col-lg-3 col-xl-2 mb-3 nm text-center">
                      <div class="card c-clean h-100">
                        <div class="card-body narrow-body vert-c hide ">
                        <a href="http://perpetuairon.com/images/railing/decorative-or-sculptural/railing-2.1.jpg" class="hide" data-toggle="lightbox" data-gallery="testgallery" data-footer="Sculptural Railing 2.1">
                          <img src="http://perpetuairon.com/images/railing/decorative-or-sculptural/railing-2.1.jpg" class="img-fluid" alt="blah blah blah">
                             </a></div> 
                      
                        <p class=" text-light">Sculptural Railing 2.1</p>

                    </div>
                  </div>
                    <div class="col-sm-12 col-md-6 col-lg-3 col-xl-2 mb-3 nm text-center">
                       <div class="card c-clean h-100">
                          <div class="card-body narrow-body lrp vert-c hide">
                        <a href="http://perpetuairon.com/images/railing/decorative-or-sculptural/railing-2.3.jpg" class="hide" data-toggle="lightbox" data-gallery="testgallery" data-footer="Sculptural Railing 2.3">
                            <img src="http://perpetuairon.com/images/railing/decorative-or-sculptural/railing-2.3.jpg" class="img-fluid " alt="blah blah blah">
                            
                            </a></div>
                        <p class=" text-light">Sculptural Railing 2.3</p>
                      </div>
                    </div>
                    <div class="col-sm-12 col-md-6 col-lg-3 col-xl-2 mb-3 nm text-center ">
                      <div class="card c-clean h-100 ">
                         <div class="card-body narrow-body vert-c hide ">
                        <a href="http://perpetuairon.com/images/railing/decorative-or-sculptural/railing-3.1.jpg" class="hide" data-toggle="lightbox" data-gallery="testgallery" data-footer="Sculptural Railing 3.1">
                            <img src="http://perpetuairon.com/images/railing/decorative-or-sculptural/railing-3.1.jpg" class="img-fluid " alt="blah blah blah">
                          
                           </a></div>
                        <p class="text-light">Sculptural Railing 3.1</p>
                    </div>
                  </div>

Источник
Другие вопросы по тегам