it-swarm.com.ru

Как получить изображения на карте Bootstrap одинаковой высоты/ширины?

Итак, вот мой код, он отображает 6 карточек, три поперек и две строки. Я хотел бы, чтобы все изображения были одинакового размера без необходимости вручную изменять размеры изображений. Отзывчивость работает, я использую «img-Fluid» в качестве класса, и когда я захожу в мобильный браузер или браузер меньшего размера, все они имеют одинаковую ширину, но высота все еще отключена. 

<h1 class="display-4 text-xs-center m-y-3 text-muted" id="speakers">Ice Cream</h1>

<div class="row">
  <div class="col-md-6 col-lg-4">
    <div class="card"><img alt="Card image cap" class="card-img-top img-fluid" src="img/brownie.jpg" />
      <div class="card-block">
        <h4 class="card-title">Brownie Delight</h4>

        <p class="card-text">Our customer favorite chocolate ice cream jam packed with pieces of brownies and fudge</p>
      </div>
    </div>
  </div>

  <div class="col-md-6 col-lg-4">
    <div class="card"><img alt="Card image cap" class="card-img-top img-fluid" src="img/butterPecan.jpg" />
      <div class="card-block">
        <h4 class="card-title">Butter Pecan</h4>

        <p class="card-text">Roasted pecans, butter and Vanilla come together to make this wonderful ice cream</p>
      </div>
    </div>
  </div>

  <div class="col-md-6 col-lg-4">
    <div class="card"><img alt="Card image cap" class="card-img-top img-fluid" src="img/bCherry.jpg" />
      <div class="card-block">
        <h4 class="card-title">Black Cherry</h4>

        <p class="card-text">Our classic Vanilla loaded with plump black cherries to give flavor and color</p>
      </div>
    </div>
  </div>

  <div class="col-md-6 col-lg-4">
    <div class="card"><img alt="Card image cap" class="card-img-top img-fluid" src="img/mintChip.jpg" />
      <div class="card-block">
        <h4 class="card-title">Mint Chip</h4>

        <p class="card-text">Our signiture mint ice cream jam packed with mint chocolate chips</p>
      </div>
    </div>
  </div>

  <div class="col-md-6 col-lg-4">
    <div class="card"><img alt="Card image cap" class="card-img-top img-fluid" src="img/pistachio.jpg" />
      <div class="card-block">
        <h4 class="card-title">Pistachio</h4>

        <p class="card-text">Our classic pistachio is loaded with nuts to give it that great flavor, and of course comes in your favorite color</p>
      </div>
    </div>
  </div>

  <div class="col-md-6 col-lg-4">
    <div class="card"><img alt="Card image cap" class="card-img-top img-fluid" src="img/IceCream.jpg" />
      <div class="card-block">
        <h4 class="card-title">More Flavors</h4>

        <p class="card-text">We couldn not fit all of our wonderful flavors on one page, click here to see more!</p>
      </div>
    </div>
  </div>
</div>

Вот изображение того, что я получаю, и это то, что я хочу получить , где они все одного размера.

19
Renuz

Попробуйте это в вашем CSS:

.card-img-top {
    width: 100%;
    height: 15vw;
    object-fit: cover;
}

Отрегулируйте высоту vw так, как считаете нужным object-fit: cover включает увеличение вместо растяжения изображения.

41
sepuckett86

это известная проблема

Я думаю, что обходной путь должен быть установлен как 

.card-img-top {
    width: 100%;
}
4
maxisam
.card-img-top {
    height: 15rem;
    object-fit: cover;
}
4
Jeremy Lynch
.card-img-top {
width: 100%;
height: 40vh;
object-fit: cover;
}

Как показано выше, но когда вы добавляете высоту, я предлагаю использовать «vh» (единицы измерения высоты окна просмотра) для более удобной работы с мобильными устройствами.

3
Dimitar Milushev

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

Вы могли бы взглянуть на использование масонства, которое сделает это приличным.

http://masonry.desandro.com/

1
Michael Mano

Я использовал «вручную», используя те же точки останова в Bootstrap 4, что и медиа-запросы ...

/* Equal-height card images, cf. https://stackoverflow.com/a/47698201/1375163*/
.card-img-top {
    /*height: 11vw;*/
    object-fit: cover;
}
  /* Small devices (landscape phones, 576px and up) */
  @media (min-width: 576px) {
    .card-img-top {
        height: 19vw;
    }
  }
  /* Medium devices (tablets, 768px and up) */
  @media (min-width: 768px) {
    .card-img-top {
        height: 16vw;
    }
  }
  /* Large devices (desktops, 992px and up) */
  @media (min-width: 992px) {
    .card-img-top {
        height: 11vw;
    }
  }
  /* Extra large devices (large desktops, 1200px and up) */
  @media (min-width: 992px) {
    .card-img-top {
        height: 11vw;
    }
  }

Это работает, хотя я бы хотел, чтобы такого рода реакция была более родной.

Частичное предложение от @ sepuckett86 и I.

1
Robert Andrews

Каждое из изображений должно быть точного размера, прежде чем вы положите их, иначе загрузчик 4 будет пытаться поместить их в причудливую форму. Bootstrap также имеет что-то вроде масонства в своих документах, которые вы можете использовать при необходимости, вы можете увидеть это здесь, http://v4-alpha.getbootstrap.com/components/card/#columns .

0
Renuz

Я решил эту проблему, используя Bootstrap 4 Emdeds Utilities

https://getbootstrap.com/docs/4.3/utilities/embed

В этом случае вам просто нужно добавить свое изображение в div.embbed-responsive, например так:

<div class="card">
  <div class="embed-responsive embed-responsive-16by9">
     <img alt="Card image cap" class="card-img-top embed-responsive-item" src="img/butterPecan.jpg" />
  </div>
  <div class="card-block">
    <h4 class="card-title">Butter Pecan</h4>
    <p class="card-text">Roasted pecans, butter and Vanilla come together to make this wonderful ice cream</p>
  </div>
</div>

Все изображения будут соответствовать соотношению, указанному в классах модификаторов:

  • .embed-responsive-21by9 
  • .embed-responsive-16by9 
  • .embed-responsive-4by3
  • .embed-responsive-1by1

Кроме того, этот CSS позволяет масштабировать вместо растяжения изображения

.embed-responsive .card-img-top {
    object-fit: cover;
}
0
Pelerano