- CSS circular image
- CSS 원형 사진, 원형 그림
1 예시[ | ]
- 정사각형 그림이라면
.photo3
, - 직사각형 인물사진이라면
.photo2
를 추천함
html
Copy
<style>
.photo1 {
width: 100px; height: 100px;
border-radius: 50%;
}
.photo2 {
width: 100px; height: 100px;
object-fit: cover;
object-position: top;
border-radius: 50%;
}
.photo3 {
width: 100px; height: 100px;
object-fit: cover;
border-radius: 50%;
}
.photo4 {
width: 100px; height: 100px;
object-fit: cover;
object-position: bottom;
border-radius: 50%;
}
</style>
<img class='photo0' src="//upload.wikimedia.org/wikipedia/commons/thumb/5/50/Albert_Einstein_%28Nobel%29.png/100px-Albert_Einstein_%28Nobel%29.png" />
<img class='photo1' src="//upload.wikimedia.org/wikipedia/commons/thumb/5/50/Albert_Einstein_%28Nobel%29.png/100px-Albert_Einstein_%28Nobel%29.png" />
<img class='photo2' src="//upload.wikimedia.org/wikipedia/commons/thumb/5/50/Albert_Einstein_%28Nobel%29.png/100px-Albert_Einstein_%28Nobel%29.png" />
<img class='photo3' src="//upload.wikimedia.org/wikipedia/commons/thumb/5/50/Albert_Einstein_%28Nobel%29.png/100px-Albert_Einstein_%28Nobel%29.png" />
<img class='photo4' src="//upload.wikimedia.org/wikipedia/commons/thumb/5/50/Albert_Einstein_%28Nobel%29.png/100px-Albert_Einstein_%28Nobel%29.png" />