728x90
728x90
이미지가 늘어나지 않도록..
과거엔 이미지크기를 직접 가로와 세로값을 지정해서 이미지가 늘거나거나 깨지거나하는경우가 많았습니다.
그 문제를 해결하기위해 사용된 방법들과 최신방법을 소개드립니다.
블랭크 이미지를 사용하는 방법
투명한 이미지를 비율조절용으로 사용하고
사용이미지를 투명이미지의 배경으로 사용할 이미지를 넣는 방법입니다.
<div class="wrap">
<div class="img-box">
<img src="투명한이미지.png" style="background:(사용할이미지.jpg)no-repeat center / cover;"/>
</div>
</div>
Padding을 사용하는 방법
이미지를 공중에(absolute) 띄워서 간격을(padding)주어 비율을 조정하는 방법입니다..
<div class="wrap">
<div class="img-box">
<img src="사용할 이미지"/>
</div>
</div>
.img-box{width:100%; padding-top:100%;}
.img-box img{position:absolute; width:100%; height:100%; left:50%; top:50%; transform:translate(-50%,-50%);}
Aspect-ratio 사용방법 (최신)
위의 방법들은 적용할 css가 많고 단순하지 않습니다.
aspect-ratio는 가장 최신에나온 비율 적용방법입니다.
간편하게 비율대로 적용이 가능합니다.
<div class="wrap">
<div class="img-box">
<img src="사용할 이미지"/>
</div>
</div>
.img-box img{aspect-ratio: 16 / 9;}
object-fit: cover;
반응형
'Code > Css' 카테고리의 다른 글
글씨에 외곽선 만들기 (0) | 2023.12.09 |
---|---|
브라우저마다 다르게 CSS 사용하기 (0) | 2022.11.23 |
다양한 도형만들기 (삼각형, 다각형, 별) (0) | 2022.11.11 |
작명규칙 (Naming Convention) (0) | 2022.10.25 |
말줄임('...') 표시하는 방법 (1줄, 여러줄) (0) | 2022.10.21 |