图片调整大小 bootstrap

Question

我是 html、css 和 bootstrap 的新手。我在使用带有 class card-img-top 的图像时遇到问题。我不明白为什么在我插入图像时它不保持 col-sm-4 的预置高度。该图像具有 size:339x508。它的高度比其他人高。这是代码：

        <div class="col-sm-4">
            <div class="card" style="width: 18rem; margin-bottom: 3em;">
              <img src="images/fashion.jpg" class="card-img-top" alt="...">
              <div class="card-body">
                <h5 class="card_title">Fashion</h5>
                <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
              </div>
            </div>
          </div>
          <div class="col-sm-4">
            <div class="card" style="width: 18rem; margin-bottom: 3em;">
              <img src="images/entertainment.jpg" class="card-img-top" alt="...">
              <div class="card-body">
                  <h5 class="card_title">Entertainment</h5>
                  <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
              </div>

Answer 1

<div class="col-sm-4">
        <div class="card" style="margin-bottom: 3em;">
            <img src="https://via.placeholder.com/339x508" class="card-img-top" alt="...">
            <div class="card-body">
                <h5 class="card_title">Fashion</h5>
                <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
            </div>
        </div>
    </div>
    <div class="col-sm-4">
        <div class="card" style="margin-bottom: 3em;">
            <img src="https://via.placeholder.com/339x508" class="card-img-top" alt="...">
            <div class="card-body">
                <h5 class="card_title">Entertainment</h5>
                <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
            </div>
        </div>
    </div>

从卡中删除 width。

Answer 2

.card-img-top
   {
     height: 250px;
   }

您可以像这样设置图片的高度。

图片调整大小 bootstrap

image resize in bootstrap

html

css

bootstrap-4