CSS : 크기가 조정되면 원형 이미지의 크기를 자동으로 조정하는 방법은 무엇입니까?

-1

나는 원형 이미지를 만들려면이 CSS를 사용하고 220px 폭 컨테이너 (AN 1180px 그리드의 3 열 범위) 내에서 중심 :CSS : 크기가 조정되면 원형 이미지의 크기를 자동으로 조정하는 방법은 무엇입니까?

.circular-image { 
    display: block; 
    margin: 0 auto; 

    width: 220px; 
    height: 220px; 
    border-radius: 110px; 
    -webkit-border-radius: 110px; 
    background: url(images/some-image.png); 
    box-shadow: 0 0 8px rgba(0, 0, 0, 0.8); 
    -webkit-box-shadow: 0 0 8px rgba(0, 0, 0, 0.8); 
    -moz-box-shadow: 0 0 8px rgba(0, 0, 0, 0.8); 
}

그리고 난 당신이 이미지를 자동으로 재조정 발생할 수 있다는 사실을 알고 다음을 사용 :

img { 
    height: auto; 
}

원형 이미지는 어떻게합니까?

출처

2013-06-08 David

접두사가 붙지 않은 속성은 접두사가 붙은 속성 뒤에 항상 넣어야합니다. 또한 고정되지 않은'border-radius'와 고정되지 않은'box-shadow'는 요즘 (caniuse.com 참조) 훌륭한 지원을하고 있습니다. FF3.6이나 구식을 지원할 필요가 없다면 접두어를 완전히 삭제할 수도 있습니다 Android 버전. – Ana

은 이미지에 유연한 너비 만 지정하고 높이는 이미 자동입니다. 모든 세트 –

border-radius: 50%;은 크기와 동일한 크기의 요소를 만듭니다 (너비와 높이가 동일하면).

출처

2013-06-08 15:44:59 Omega

이전 Android 및 Blackberry의 일부 버전에서는 제대로 렌더링되지 않습니다. 최고의 브라우저 지원을 얻으려면 높은 px 또는 em 값 (999em)을 사용하십시오. –

원형 이미지의 정확한 문제점은 무엇입니까? 당신은 이미지의 '원형'에 문제가있는 경우에 당신은 상대 값으로 border-radius 속성을 변경해야합니다

여기

.circular-image { 
    display: block; 
    margin: 0 auto; 

    width: 75%; 
    height: auto; 
    -webkit-border-radius: 50%; 
    -moz-border-radius: 50%; 
    border-radius: 50%; 
    background-color: red; 
}

는 작업 jsFiddle이다.

출처

2013-06-08 15:45:48 fynn

CSS : 크기가 조정되면 원형 이미지의 크기를 자동으로 조정하는 방법은 무엇입니까?

답변

관련 문제