Bootstrap : Card에 이미지 고정비율로 삽입

아래 링크는 개인 홈페이지에 각 쇼핑몰 판매량를 트레킹해서 만든 저렴한 딜 정보 모음페이지이다. 뽐뿌 같은 핫딜 사이트 가기 번거로워서 만들었는데, 고물과 시대에 아무 생각없이 사용하기 좋은 것 같다. 실시간 기반이고 go와 headless 베이스라 속도가 빠르다.

광고 맞다. ㅜㅠ

Best Price

 

 

 

1. Bootstrap에서는 Bulma처럼 image placeholder를 지원하지 않는다.

  1-1 아래의 bulma에 있는 주소를 쓰면 된다.

https://bulma.io/images/placeholders/1280x960.png

https://bulma.io/images/placeholders/96x96.png

2. 이 포스팅의 주제인 Card component의 이미지를 고정비율로 삽입하는 방법이다.

  2-1 Bulma의 경우는 다양한 크기의 image를 고정시킬 수 있다.

  2-2 image is-128x128, image is-4by3같은class element를 제공한다.

 

Bulma: Free, open source, and modern CSS framework based on Flexbox

  2-3 Bootstrap은 이런 기능이 없다.

    2-3-1 이런 기능을 구현하려면 Bootstrap의 Embed utility를 사용하면 된다.

    2-3-2 div에 embed-responsive embed-responsive-4by3 같이 비율을 설정하고

    2-3-3 img element의 class에 embed-responsive-item을 지정하면 된다.

<div class="container">
  <div class="card-deck">
    <div class="card" *ngFor="let item of cards">
      <div class="embed-responsive embed-responsive-4by3">
        <img src="{{ item.imageUrl }}" class="card-img-top embed-responsive-item" alt="tree">
      </div>
      <div class="card-body">
        <h5 class="card-title">{{ item.title }}</h5>
        <h5 class="card-subtitle">{{ item.subtitle }}</h5>
        <p class="card-text mt-3">{{ item.text }}</p>
      </div>
    </div>
  </div>
</div>

    2-3-4 결과는 아래와 같이 사진의 비율이 각기 달라도 비율이 동일한 4:3의 비율로 들어간다.

3. 보통 iframe, embed, vide, object에 사용되나 img도 동일하게 적용된다.

<!-- 21:9 aspect ratio -->
<div class="embed-responsive embed-responsive-21by9">
  <iframe class="embed-responsive-item" src="..."></iframe>
</div>

<!-- 16:9 aspect ratio -->
<div class="embed-responsive embed-responsive-16by9">
  <iframe class="embed-responsive-item" src="..."></iframe>
</div>

<!-- 4:3 aspect ratio -->
<div class="embed-responsive embed-responsive-4by3">
  <iframe class="embed-responsive-item" src="..."></iframe>
</div>

<!-- 1:1 aspect ratio -->
<div class="embed-responsive embed-responsive-1by1">
  <iframe class="embed-responsive-item" src="..."></iframe>
</div>