[CSS] 크기가 다양한 썸네일 이미지 만들기

크기가 다양한 이미지의 썸네일 이미지를 만들어 보자.

 

가로 세로 모두 1/2 로 축소하고 relative 와 absolute 코드를 이용한다.

 

 

<style>
.board_view_inner .view_thumnail{position: relative; width:160px; height:100px; overflow: hidden; background: #eef1f7;}
.board_view_inner .view_thumnail img{position:absolute; top:50%; left:50%; transform: translate(-50%, -50%); width:auto; height:100%; }
</style>
 
<div class="board_view_inner">
    <i><img src="/img/board/ic_file_01.jpg" alt="1624614517_899.png"></i>
    <a href="/inc/download.php?fn=1624614517_899.png&dir=gboard_gallery&ext=1">20201230_090106.png</a> 
    <span>(968 KB)</span>
    <br>
 
    <i><img src="/img/board/ic_file_01.jpg" alt="1624614517_1219.jpg"></i>
    <a href="/inc/download.php?fn=1624614517_1219.jpg&dir=gboard_gallery&ext=1">가는말이곱다.jpg</a> 
    <span>(140 KB)</span>
    <br>
 
    <i><img src="/img/board/ic_file_01.jpg" alt="1624614517_1745.jpg"></i>
    <a href="/inc/download.php?fn=1624614517_1745.jpg&dir=gboard_gallery&ext=1">wefff아빠고고싱.jpg</a> 
    <span>(99 KB)</span>
</div>