고정 크기 블록 안에 둥근 모서리가있는 임의 크기 이미지 표시

고정 크기 블록 안에 임의 크기 이미지를 표시해야합니다. 이미지의 모서리를 둥글게해야합니다. 이미지가 블록 전체를 채워야합니다. 크기가 블록보다 크거나 작 으면 크기를 조정해야합니다. 이미지의 가로 세로 비율이 블록의 가로 세로 비율과 다른 경우 가로 세로 및 세로 가운데로 자릅니다.고정 크기 블록 안에 둥근 모서리가있는 임의 크기 이미지 표시

은 지금까지 나는 시도했다 :

CSS 국경 반경을 사용하여 블록의 모서리를 라운딩 - 이미지가 오페라의 둥근 모서리 (Example)를 통해 나타납니다.
CSS 경계선 반경을 사용하여 이미지의 모서리를 반올림합니다. 둥근 모서리는 자르기로 제거됩니다.
CSS border-radius를 사용하여 이미지를 배경으로 반올림 - 이미지의 크기가 제대로 조정되지 않았습니다.

순수 CSS 솔루션을 선호하지만 JavaScript/jQuery 솔루션도 좋습니다. 나는 적어도 현대의 브라우저에서 작동하고 오래된 브라우저 (사각형 모서리, 이미지가 블록 밖으로 나가지 않는 등)에서 우아하게 저하되는 솔루션을 찾고 있습니다.

출처

2012-05-22 kotekzot

PHP에서 이미지 조작에 대해 약간 읽은 다음 이미지의 크기를 적절하게 조정하려면 수학 공식을 찾아야합니다. – d4rkpr1nc3

아직 고정 크로스 브라우저가 아닙니다. 조금 기다려야 할 것입니다. (비록 당신이 그것을 했더라도, 요소에 애니메이션이나 전환 또는 그림자를 추가하면 이미지 코너가 튀어 나오는 경우가 있습니다.) –

@ RokoC.Buljan 고맙게도 저는 이러한 요소에 애니메이션, 장면 전환 또는 그림자가 필요하지 않습니다. – kotekzot

왜 시도하지 않습니까? this fiddle 만들었습니까?

아이디어는 센터링, 자르기 및 잘 다루는 background-size: cover; CSS 속성을 사용하는 것입니다. 여기에 바이올린 추출물의 :

div.yourWrapper { 
    width: 50px; 
    height: 50px; 
    -webkit-border-radius: 10px; 
    -moz-border-radius: 10px; 
    border-radius: 10px; 
    background: url('some_image.jpg') no-repeat center center; 
    -webkit-background-size: cover; 
    -moz-background-size: cover; 
    -o-background-size: cover; 
    background-size: cover; 
}

나는이 IE에서 심각하게 다운 그레이드하는 방법 아무 생각이, 지원 오페라 인해 extremely low market adoption 그냥 잘못 (하지만, 당신이 지금 나에게 고함을 시작할 수 있습니다 내 개인적인 의견입니다).

출처

2012-05-22 11:36:04 Oleg

오페라에서 잘 작동합니다, IE8 멋지 네요. 경계선 반경이 누락되어 이미지가 작아 지지만 괜찮습니다. –

오페라는 개발중인 사이트의 대상 잠재 고객 인 러시아 (일부 IE는 물론 일부 다른 브라우저보다)에서 상당한 시장 점유율을 차지하고 있습니다. 또한 그 뒤에 많은 혁신적인 기능을 갖춘 훌륭한 브라우저입니다 (탭 브라우저, 마우스 제스처, 모든 Opera). 어쨌든, 좋은 대답! – kotekzot

오페라에 버그가있는 것처럼 보입니다.이 솔루션을 사용하지 않는 경우가 있습니다. http://jsfiddle.net/crrYa/ 지금 당장이 기능을 사용하고 해결되었거나 다른 솔루션이 나오기를 바랍니다. – kotekzot

고정 크기 블록 안에 둥근 모서리가있는 임의 크기 이미지 표시

답변

관련 문제