[css]이미지 센터 정사각형으로 CROP하기

CSS를 활용하여 이미지를 정사각형으로 자르기

HTML

<div class="thumb">
    <img src="http://lorempixel.com/400/800" alt="" />
</div>

CSS

.thumb {
    display: block;
    overflow: hidden;
    height: 200px;
    width: 200px;
}

.thumb img {
    display: block; /* Otherwise it keeps some space around baseline */
    min-width: 100%;    /* Scale up to fill container width */
    min-height: 100%;   /* Scale up to fill container height */
    -ms-interpolation-mode: bicubic; /* Scaled images look a bit better in IE now */
}

1. Html은 <ima>를 <div>로 감싼다.

2. Css에는 지정 할 정사각형의 크기를 <div>의 속성에 정의를 하고, 이미지에  min-width: 100%;  min-height: 100%; 를 정의하면 끝!!

쉽죠??

예제를 통해 알아보면

이렇게 하면 결과는~~~~

After CSS crop

• 
• 
• 
• 
• 

Before CSS crop

• 
• 
• 
• 
•