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

<p>итак, вот мой код, он отображает 6 карточек, три поперек и две строки. я хотел бы, чтобы все изображения были одинакового размера без необходимости вручную изменять размеры изображений. отзывчивость работает, я использую «img-fluid» в качестве класса, и когда я захожу в мобильный браузер или браузер меньшего размера, все они имеют одинаковую ширину, но высота все еще отключена. </p><pre><code><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> </code></pre><p>вот <a href="https://imgur.com/cxekvmc">изображение</a> того, что я получаю, и это то, что я хочу <a href="https://imgur.com/pt8uctr">получить</a> , где они все одного размера.</p>

<p>попробуйте это в вашем css:</p><pre><code>.card-img-top { width: 100%; height: 15vw; object-fit: cover; } </code></pre><p>отрегулируйте высоту vw так, как считаете нужным <em> object-fit: cover </em>включает увеличение вместо растяжения изображения.</p>

<p>это <a href="https://github.com/twbs/bootstrap/pull/22288">известная проблема</a> </p><p>я думаю, что обходной путь должен быть установлен как </p><pre><code>.card-img-top { width: 100%; } </code></pre>

<pre><code>.card-img-top { height: 15rem; object-fit: cover; } </code></pre>

<pre><code>.card-img-top { width: 100%; height: 40vh; object-fit: cover; } </code></pre><p>как показано выше, но когда вы добавляете высоту, я предлагаю использовать «vh» (единицы измерения высоты окна просмотра) для более удобной работы с мобильными устройствами.</p>

<p>я не верю, что вы можете обрезать их, я имею в виду, что вы можете сделать div одинаковой высоты, используя jquery, однако это не сделает изображения одинакового размера.</p><p>вы могли бы взглянуть на использование масонства, которое сделает это приличным.</p><p> <a href="http://masonry.desandro.com/">http://masonry.desandro.com/</a> </p>

<p>я использовал «вручную», используя те же точки останова в bootstrap 4, что и медиа-запросы ...</p><pre><code>/* 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; } } </code></pre><p>это работает, хотя я бы хотел, чтобы такого рода реакция была более родной.</p><p>частичное предложение от @ sepuckett86 и i.</p>

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

<p>я решил эту проблему, используя bootstrap 4 emdeds utilities</p><p> <a href="https://getbootstrap.com/docs/4.3/utilities/embed">https://getbootstrap.com/docs/4.3/utilities/embed</a> </p><p>в этом случае вам просто нужно добавить свое изображение в <code>div.embbed-responsive</code>, например так:</p><pre><code><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> </code></pre><p>все изображения будут соответствовать соотношению, указанному в классах модификаторов:</p><ul> <li><code>.embed-responsive-21by9</code> </li> <li><code>.embed-responsive-16by9</code> </li> <li><code>.embed-responsive-4by3</code></li> <li><code>.embed-responsive-1by1</code></li> </ul><p>кроме того, этот css позволяет масштабировать вместо растяжения изображения</p><pre><code>.embed-responsive .card-img-top { object-fit: cover; } </code></pre>