CSS 증명사진 자르기

1 개요[ | ]

CSS 증명사진 자르기
CSS .photo-box
CSS .photo-circle

html

Copy

<style>
.photo-box {
    width: 100px; height: 100px;
    object-fit: cover;
    object-position: top;
}
.photo-circle {
    width: 100px; height: 100px;
    object-fit: cover;
    object-position: top;
    border-radius: 50%;
}
</style>

<img src="//upload.wikimedia.org/wikipedia/commons/thumb/5/50/Albert_Einstein_%28Nobel%29.png/100px-Albert_Einstein_%28Nobel%29.png" />
<img class='photo-box' src="//upload.wikimedia.org/wikipedia/commons/thumb/5/50/Albert_Einstein_%28Nobel%29.png/100px-Albert_Einstein_%28Nobel%29.png" />
<img class='photo-circle' src="//upload.wikimedia.org/wikipedia/commons/thumb/5/50/Albert_Einstein_%28Nobel%29.png/100px-Albert_Einstein_%28Nobel%29.png" />

2 같이 보기[ | ]