Как я могу создать адаптивное изображение внутри столбца строк в bootstrap?

ProgramBox

Как я могу создать адаптивное изображение внутри столбца строк в bootstrap?

Post author:admin
Запись опубликована:2 апреля, 2023
Post category:Вопросы по программированию

#html #css #twitter-bootstrap

#HTML #css #twitter-bootstrap

Вопрос:

Я создал «сетку», в которой отображаются логотипы. Некоторые логотипы имеют формат .svg, другие — .png. Я подаю в суд на bootstrap row-col за создание этой сетки. На рабочем столе, который я использую row-cols-lg-3 , и он работает просто отлично, в нем 3 столбца. На мобильных устройствах мне нужно, чтобы в нем было 2 столбца, поэтому я использую row-cols-sm-2 . Однако он показывает только один столбец. Логотипы должны быть адаптивными, поэтому я хочу задать их ширину, используя %, а не px. Когда я использую px, два столбца работают просто отлично. Когда я использую %, этого не происходит, на самом деле некоторые логотипы даже исчезают.

Надеюсь, это то, чего мне нужно достичь, используя width: x% вместо width:ypx

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

Вот мой код:

 /* CSS for Desktop View */

.logo-grid img {
  width: 100%;
  padding: 15px 0;
}


/* Responsive CSS */

.logo-grid {
  width: 100%;
  margin: 0 auto;
}

.logo-grid img {
  width: 100%;
}

 <div class="container">
  <div class="row">
    <div class="col-12">
      <div class="row">
        <div class="col-lg-6 col-md-12 col-sm-12 col-xs-12 col-12">
          <p></p>
        </div>


        <!-- The Logo Grid -->

        <div class="col-lg-6 col-md-12 col-sm-12 col-xs-12 col-12 comercios-usan-paygol-img-container">
          <div class="row row-cols-lg-3 row-cols-md-2 row-cols-sm-2 row-cols-xs-2 logo-grid">
            <div class="col"><img src="images/logo-tebex.svg" alt="Logo Tebex"></div>
            <div class="col"><img src="images/logo-payvalida.png" alt="Logo Payvalida"></div>
            <div class="col"><img src="images/logo-pago-efectivo.svg" alt="Logo Pago Efectivo"></div>
            <div class="col"><img src="images/logo-prestashop.svg" alt="Logo Prestashop"></div>
            <div class="col"><img src="images/logo-whmos.svg" alt="Logo WHMOS"></div>
            <div class="col"><img src="images/logo-paysafecard.svg" alt="Logo Paysafe Card"></div>
            <div class="col"><img src="images/logo-fhlgames.png" alt="Logo FHL Games"></div>
            <div class="col"><img src="images/logo-kaybo.png" alt="Logo Kaybo"></div>
            <div class="col"><img src="images/logo-jumpseller.svg" alt="Logo Jumpseller"></div>
            <div class="col"><img src="images/logo-openbucks.png" alt="Logo Openbucks"></div>
            <div class="col"><img src="images/logo-fortumo.png" alt="Logo Fortumo"></div>
            <div class="col"><img src="images/logo-1k.svg" alt="Icono  1K"></div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

1. Разве в Bootstrap нет адаптивного класса изображений img-fluid ? getbootstrap.com/docs/4.5/content/images

2. Я добавил img-fluid класс к <img> , и он по-прежнему не работает:(

3. У вас все еще есть другие классы, определяющие ширину ваших изображений

4. Проблема не в изображениях — на самом деле это с row-cols классами. Вы пытаетесь использовать row-cols-xs-2 для небольших экранов, но его не существует. Вам нужно всего лишь одно изменение, чтобы заставить это работать — я объяснил это в своем ответе 🙂

Ответ №1:

Проблема:

Проблема в том, что вы не установили row-cols класс для экранов размером менее 576 пикселей ( sm точка останова) — вы пытались использовать, row-cols-xs-2 но в Bootstrap 4 нет xs точки останова. Это означает, что на маленьких экранах применяется CSS по умолчанию row-cols , и он пытается разместить все логотипы в одной строке (потому что эти классы используют flexbox)… причина, по которой они «исчезли», заключается в том, что они слишком малы, чтобы поместиться.

Как это решить:

Вам просто нужно добавить row-cols-2 в свой row div, чтобы он использовал 2 cols на экранах меньшего размера. Кроме того, вам не нужно устанавливать столбцы строк для каждой точки останова — меньшая точка останова будет применяться до тех пор, пока она не достигнет большей:

 <div class="row row-cols-lg-3 rows-cols-2 logo-grid">

изображение-fluid в зависимости от ширины: 100%

Кроме того, вам не нужен пользовательский CSS для установки ширины, если вы хотите вместо этого использовать класс Bootstrap img-fluid. В приведенном ниже примере я добавил, img-fluid чтобы у divs и у другой половины было width:100% (они окаймлены желтым, чтобы вы могли видеть, что есть что). Они оба действуют одинаково, так что это просто зависит от того, хотите ли вы добавить классы к каждому изображению или воспроизвести стиль в своем собственном CSS.

Также, к вашему сведению, есть проблема с вашим CSS — вы не должны устанавливать padding на изображение — заполнение идет внутри элемента, поэтому оно не имеет смысла для использования изображения margin вместо этого.

Рабочий пример со всем этим!

 /* CSS for Desktop View */
.logo-grid img {
  margin: 15px 0;
}

/* CSS for Desktop View */

.logo-grid img:not(.img-fluid) {
  width: 100%;
  border: 3px solid yellow;
}


/* Responsive CSS */

.logo-grid {
  width: 100%;
  margin: 0 auto;
}

.logo-grid img {
  width: 100%;
}

 <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP VmmDGMN5t9UJ0Z" crossorigin="anonymous">

<div class="container">
  <div class="row">
    <div class="col-12">
      <div class="row">
        <div class="col-lg-6 col-md-12 col-sm-12 col-xs-12 col-12">
          <p></p>
        </div>

        <!-- The Logo Grid -->

        <div class="col-lg-6 col-md-12 col-sm-12 col-xs-12 col-12 comercios-usan-paygol-img-container">
          <div class="row row-cols-lg-3 row-cols-2 logo-grid">
            <div class="col"><img src="http://lorempixel.com/200/100/animals/3" alt="Logo Tebex"></div>
            <div class="col"><img src="http://lorempixel.com/200/100/animals/3" alt="Logo Payvalida"></div>
            <div class="col"><img src="http://lorempixel.com/200/100/animals/3" alt="Logo Pago Efectivo"></div>
            <div class="col"><img src="http://lorempixel.com/200/100/animals/3" alt="Logo Prestashop"></div>
            <div class="col"><img src="http://lorempixel.com/200/100/animals/3" alt="Logo WHMOS"></div>
            <div class="col"><img src="http://lorempixel.com/200/100/animals/3" alt="Logo Paysafe Card"></div>
            <div class="col"><img src="http://lorempixel.com/200/100/animals/3" class="img-fluid" alt="Logo FHL Games"></div>
            <div class="col"><img src="http://lorempixel.com/200/100/animals/3" class="img-fluid" alt="Logo Kaybo"></div>
            <div class="col"><img src="http://lorempixel.com/200/100/animals/3" class="img-fluid" alt="Logo Jumpseller"></div>
            <div class="col"><img src="http://lorempixel.com/200/100/animals/3" class="img-fluid" alt="Logo Openbucks"></div>
            <div class="col"><img src="http://lorempixel.com/200/100/animals/3" class="img-fluid"  alt="Logo Fortumo"></div>
            <div class="col"><img src="http://lorempixel.com/200/100/animals/3" class="img-fluid"  alt="Icono  1K"></div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

Ответ №2:

Это то, что вы пытаетесь сделать, или вы хотите сделать что-то еще.??

 .logo-grid img {
  width: 100%;
  padding: 15px 0;
}


/* Responsive CSS */

.logo-grid {
  width: 100%;
  margin: 0 auto;
}

.logo-grid img {
  width: 100%;
}

 <!-- CSS only -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP VmmDGMN5t9UJ0Z" crossorigin="anonymous">


<div class="container">
  <div class="row">
    <div class="col-12">
      <div class="row">
        <div class="col-lg-6 col-md-12 col-sm-12 col-12">
          <p></p>
        </div>
        <!-- The Logo Grid -->
        <div class=" col-lg-6 col-12 comercios-usan-paygol-img-container">
          <div class="row row-cols-lg-3 row-cols-sm-2 row-cols-1 logo-grid">
            <div class="text-center"><img class="img-fluid" src="https://picsum.photos/200" alt="Logo Tebex"></div>
            <div class="text-center"><img class="img-fluid" src="https://picsum.photos/201" alt="Logo Payvalida"></div>
            <div class="text-center"><img class="img-fluid" src="https://picsum.photos/202" alt="Logo Pago Efectivo"></div>
            <div class="text-center"><img class="img-fluid" src="https://picsum.photos/203" alt="Logo Prestashop"></div>
            <div class="text-center"><img class="img-fluid" src="https://picsum.photos/204" alt="Logo WHMOS"></div>
            <div class="text-center"><img class="img-fluid" src="https://picsum.photos/205" alt="Logo Paysafe Card"></div>
            <div class="text-center"><img class="img-fluid" src="https://picsum.photos/206" alt="Logo FHL Games"></div>
            <div class="text-center"><img class="img-fluid" src="https://picsum.photos/207" alt="Logo Kaybo"></div>
            <div class="text-center"><img class="img-fluid" src="https://picsum.photos/208" alt="Logo Jumpseller"></div>
            <div class="text-center"><img class="img-fluid" src="https://picsum.photos/209" alt="Logo Openbucks"></div>
            <div class="text-center"><img class="img-fluid" src="https://picsum.photos/210" alt="Logo Fortumo"></div>
            <div class="text-center"><img class="img-fluid" src="https://picsum.photos/211" alt="Icono  1K"></div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

<!-- JS, Popper.js, and jQuery -->
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C OGpamoFVy38MVBnE IbbVYUew OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU 6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js" integrity="sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV rV" crossorigin="anonymous"></script>
<!-- <script type=" text/javascript ">

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

1. Да, это именно то, что мне нужно. Мой код похож на ваш, но отображаются не все логотипы. Как вы думаете, это связано с тем, что некоторые из них являются .png, а другие .svg?

2. ну, я не думаю, что формат изображения имеет к этому какое-либо отношение. Возможно, размер изображения вызывает эту проблему? Или, может быть, вы переопределяете его где-то еще?

3. Я удалил свое col из divs и добавил text-center предложенное вами, и это сработало. Спасибо!!!