image resize in bootstrap-CodePudding

I am new to html, css, & bootstrap. I am having a problem with an image with a class of card-img-top. I can t figure out why it doesn t maintain the pre-height of the col-sm-4 when I insert my image. The image has the size:339x508. It gets larger in height from others. Here is the code:

        <div >
            <div  style="width: 18rem; margin-bottom: 3em;">
              <img src="images/fashion.jpg"  alt="...">
              <div >
                <h5 >Fashion</h5>
                <p >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 >
            <div  style="width: 18rem; margin-bottom: 3em;">
              <img src="images/entertainment.jpg"  alt="...">
              <div >
                  <h5 >Entertainment</h5>
                  <p >Some quick example text to build on the card title and make up the bulk of the card's content.</p>
              </div>

CodePudding user response：

<div >
        <div  style="margin-bottom: 3em;">
            <img src="https://via.placeholder.com/339x508"  alt="...">
            <div >
                <h5 >Fashion</h5>
                <p >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 >
        <div  style="margin-bottom: 3em;">
            <img src="https://via.placeholder.com/339x508"  alt="...">
            <div >
                <h5 >Entertainment</h5>
                <p >Some quick example text to build on the card title and make up the bulk of the card's content.</p>
            </div>
        </div>
    </div>

remove width from card.

CodePudding user response：

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

You can set the height of your image like this.