示例:卡片×3按钮(五)

感谢 darcyc 大佬的指点;
给IMG加了个style尾巴:style="height:330px ; object-fit: cover;">
这样就可以让图片自适应比例,并且限制了最高像素;

Card title

This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.

Card title

This is a short card.

Card title

This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.

<div class="row row-cols-1 row-cols-md-3 g-4">
	
  <div class="col">
    <div class="card h-100">
      <img src="https://files.getquicker.net/_sitefiles/_guides/52593d69-c99a-4367-8b98-08d9a65be47e/2021/12/04/213736_202824_2.jpeg" class="card-img-top" style="height:330px ; object-fit: cover;">
      <div class="card-body">
        <h5 class="card-title">Card title</h5>
        <p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
      </div>
    </div>
  </div>
	
  <div class="col">
    <div class="card h-100">
      <img src="https://files.getquicker.net/_sitefiles/_guides/52593d69-c99a-4367-8b98-08d9a65be47e/2021/12/04/215027_202824_2.jpeg" class="card-img-top" style="height:330px ; object-fit: cover;">
      <div class="card-body">
        <h5 class="card-title">Card title</h5>
        <p class="card-text">This is a short card.</p>
      </div>
    </div>
  </div>

  <div class="col">
    <div class="card h-100">
      <img src="https://files.getquicker.net/_sitefiles/_guides/ead85b98-49f5-4e73-3000-08d9b733fc81/2021/12/12/181421_202824_4.jpeg" class="card-img-top" style="height:330px ; object-fit: cover;">
      <div class="card-body">
        <h5 class="card-title">Card title</h5>
        <p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
      </div>
    </div>
  </div>
	
</div>