Notice
Recent Posts
Recent Comments
Tags more
«   2026/02   »
일 월 화 수 목 금 토
1 2 3 4 5 6 7
8 9 10 11 12 13 14
15 16 17 18 19 20 21
22 23 24 25 26 27 28
Archives
Today
Total
관리 메뉴

웹개발자의 기지개

[CSS] img 태그 이미지 비율 손상없이 이쁘게 꽉 채우기 본문

웹퍼블리싱/CSS

[CSS] img 태그 이미지 비율 손상없이 이쁘게 꽉 채우기

웹개발자 워니 2025. 5. 1. 10:59

다양한 비율의 img 태그 사진의 경우 들쑥날쑥이라 가지런하게 나열하기 쉽지 않다.

 

아래와 같이 하면 약간의 사진이 가려지는 부분이 있을 수는 있어도 가지런한 이미지 묶음들을 나타낼 수 있다.

 

1
2
3
4
5
6
7
8
9
.list {
 
    img {
        width: 100%;
        aspect-ratio: 16/9;
        object-fit: cover;
        border:1 px solid #dddddd;
    }
}
 cs

 

aspect-ratio: 16/9;
object-fit: cover;

 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
<!DOCTYPE html>
<html lang="ko">
 <head>
  <meta charset="UTF-8">
  <title>Document</title>
  
  <style>
  .wrap-image {
        width:100%;
        position: relative;
        
        
  }
  .wrap-image::after {
    display:block;
    content: "";
    padding-bottom:100%; 
  }
  
  .wrap-image > img {
        width:100%;
        height:100%;
        position: absolute;
        left: 0;
        object-fit: cover;
        border-radius: 8px;
  }
  </style>
 </head>
 <body>
  
사진 가로 세로 비율이 다른 여러장의 이미지가 있어도,<br>
padding-bottom 을 바탕으로 가로/세로 이미지가 일정한 이미지가 화면에 나오도록 CSS 코딩기법
  <ul>
        <li class="wrap-image"><img src="img1.jpg" /></li>
        <li class="wrap-image"><img src="img2.jpg" /></li>
        <li class="wrap-image"><img src="img3.jpg" /></li>
        <li class="wrap-image"><img src="img4.jpg" /></li>        
  </ul>
 </body>
</html>
 cs

 

 

참고 : https://www.youtube.com/shorts/mf_8xLqg3tk

 

 

 

 

'웹퍼블리싱 > CSS' 카테고리의 다른 글

[CSS,Javascript] 이미지 가로 스크롤 나오게, 클릭시 이미지 확대  (0) 2026.02.11
[CSS] 사진 이미지 가로,세로 비율 적절히 중앙에 꽉채우기  (0) 2025.11.06
[CSS] 배경에 Blur 효과 만들기  (0) 2025.03.24
[CSS] ToolTip 툴팁 - 내용 미리보기 기능 구현하기  (0) 2025.03.14
[CSS] 인쇄시 배경이미지가 안나올때  (0) 2024.12.22
'웹퍼블리싱/CSS' Related Articles more
Comments