둥근 코너 상자가 넘치지 않도록하는 방법은 무엇입니까?

StackOverflow https://stackoverflow.com/questions/587814

  •  06-09-2019
  •  | 
  •  

문제

이 코드를 사용하는 경우 이미지는 DIV의 둥근 모서리에 의해 잘리지 않습니다 (이미지의 정사각형 코너가 DIV의 둥근 모서리를 덮습니다) :

<div style="border-radius: 1em; -moz-border-radius: 1em; -webkit-border-radius: 1em; overflow:hidden;">
    <img src="big-image.jpg" />
</div>

아동 이미지가 넘치지 않도록 둥근 코더 div를 얻는 방법을 아는 사람이 있습니까?

도움이 되었습니까?

해결책

이것은 귀하의 상황에서 작동하거나 작동하지 않을 수도 있지만 이미지를 CSS 배경으로 만드는 것을 고려하십시오. FF3에서는 다음이 잘 작동합니다.

<div style="
  background-image:   url(big-image.jpg);
  border-radius:      1em;
  height:             100px;
  -moz-border-radius: 1em;
  width:              100px;"
></div>

다른 해결 방법이 있는지 확실하지 않습니다. 이미지 자체에 테두리를 적용하면 (예 : 1em 깊은), 당신은 정사각형 코너의 같은 문제를 얻습니다.

편집하다: "이미지에 테두리를 추가하는"케이스에서는 이미지 삽입이 정확하지만 이미지가 div 요소. 결과를 확인하려면 추가하십시오 style="border:1em solid black;border-radius:1em;-moz-border-radius:1em;" ~로 img 태그 ( width 그리고 height 필요한 경우 적절하게 설정).

다른 팁

나의 최신 크롬, 파이어 폭스 및 사파리는 이미지를 컨테이너의 국경-라디우스 (의도 한대로)에 자릅니다.

http://jsfiddle.net/rqyna/12/embedded/result/

Firefox 15에서는 컨테이너가 {overflow: hidden}. (아동 콘텐츠의 클리핑은 그랬던 것 같습니다 Gecko 2.0에 추가되었습니다.)

Chrome 23 & Safari 5에서는 이미지가 잘린 것을 봅니다. 뿐 컨테이너가있는 경우 {position: static; overflow: hidden} 그리고 이미지가 있습니다 {position: static}.

경우에도 overflow 설정되었습니다 hidden, border-radius 콘텐츠를 클립하지 않습니다. 이것은 디자인에 의한 것입니다.

한 가지 해결책은 설정하는 것입니다 border-radius 컨테이너뿐만 아니라 이미지에도.

<div style="border-radius: 16px; ...">
    <img src="big-image.jpg" style="border-radius: 16px; ..." />
</div>

또 다른 방법은 이미지를 컨테이너의 배경으로 설정하는 것입니다. background-image; 그러나 버전 3 이전의 Firefox에는이 방법에 문제가 있습니다 ( 이 버그) - 당신을 너무 귀찮게 할 필요가 없습니다.

이 해결 방법을 시도하십시오.

  1. 이미지 img 태그가 존재하고 너비는 너비와 높이를 설정합니다.
  2. 그런 다음 숨겨져 있습니다 visibility:hidden. 너비와 높이는 손상되지 않습니다.
  3. 그 후에는 배경 이미지와 동일한 소스를 설정합니다.

<a class="thumb" href="#" style="background-image: url('./img/pic1.jpg');" title="Picture">
  <img border="0" src="./img/pic1.jpg" alt="Pic" height="100" width="150" />
</a>

#page .thumb {
background-repeat: no-repeat;
background-position: left top;
border: 3px #e5dacf solid;
display: block;
float: left;}

#page .thumb img {
display: block;
visibility: hidden;}

CSS3에는 이제 배경 클립이 있습니다. 모든 주요 브라우저에서 작동합니다. 옵션은 테두리 박스, 패딩 박스 및 컨텐츠 박스입니다. 귀하의 경우에는 패딩 박스를 사용하고 싶다고 생각합니다.

-webkit-background-clip: padding-box;
-moz-background-clip:    padding; 
background-clip:         padding-box;

이미지를 내용 대신 배경 이미지로 만들면 이미지가 둥근 모서리를 클립하지 않습니다 (적어도 FF3에서).

또한 DIV에 패딩을 추가하거나 이미지가 둥근 테두리와 이미지 사이에 추가 패딩을 추가 할 수 있습니다.

간단한 border-radius 에 img 태그는 Safari 5, Chrome 16, Firefox 9의 현재 버전에서 잘 작동합니다.

<div>
    <img src="big-image.jpg" style="border-radius: 1em;" />
</div>

이 문제는 이미지 나 이미지의 부모가 위치 일 때 발생한다고 생각합니다. 이는 Absolute를 설정하여 문서의 흐름에서 요소를 제거하므로 이해할 수 있습니다.

나는 이것에 대한 수정을 보았을 것이라고 확신한다.

여분의 자르기는 일반적으로 테두리 두께의 오차 마진 내에 있습니다. 내부 반경이 약간 작아서 오류의 여백이 IS 옆에있는 경계 아래에 떨어지도록하십시오.

<div style='border-radius:5px;border:thin solid 1px;'>
   <img style='border-radius:4px' />
</div>

오버플로와 함께 정확한 너비와 heigth를 지정해야합니다.

라이센스 : CC-BY-SA ~와 함께 속성
제휴하지 않습니다 StackOverflow
scroll top