"CSS 원형 사진"의 두 판 사이의 차이

2015년 8월 28일 (금) 14:48 판

CSS circular image
CSS 원형 사진, 원형 그림

예시

<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" />

@@ 33번째 줄: / 33번째 줄: @@
 <img class='photo4' src="//upload.wikimedia.org/wikipedia/commons/thumb/5/50/Albert_Einstein_%28Nobel%29.png/100px-Albert_Einstein_%28Nobel%29.png" />
 </source>
-<jsfiddle>p38184mL</jsfiddle>
+<jsfiddle height='100'>p38184mL</jsfiddle>
 [[분류: CSS]]