깜놀하는 해므찌로

Tailwind CSS 이미지 rounded 예시 본문

IT

Tailwind CSS 이미지 rounded 예시

agnusdei1207 2023. 7. 3. 19:03
반응형
SMALL

<div class="rounded-md overflow-hidden w-max h-max">
  <img [src]="video.image" />
</div>

1. img 태그를 한 번 더 div 로 감쌉니다.

2. rounded 효과를 주고 이미지 크기가 서로 다를 경우를 대비하여 div 내부 즉 이미지 크기를 w, h max 최대치로 설정

3. overflow-hidden 크기를 초과하려 넘어갈 경우 숨기기

 

반응형
LIST

'IT' 카테고리의 다른 글

Tailwind 모바일, PC CSS 기본 원리  (0) 2023.07.04
ApexChart bar radius rounded 효과 예시  (0) 2023.07.04
TypeScript Generic  (0) 2023.07.03
Tailwind 중앙 정렬 (콘텐츠, 글씨 등)  (0) 2023.07.02
Class 이름 자동 정렬 / Headwind  (0) 2023.07.01
'IT' Related Articles more