Safari에서 원형 이미지가 잘리는 이유는 무엇이며 어떻게 해결할 수 있습니까?-CSS 튜토리얼-php.cn

Safari에서 원형 이미지가 잘리는 이유는 무엇이며 어떻게 해결할 수 있습니까?

Susan Sarandon

풀어 주다： 2024-12-08 06:01:12

원래의

299명이 탐색했습니다.

Why are Circular Images Cropped in Safari and How Can I Fix It?

Safari의 둥근 모서리(테두리 반경)

테두리 반경을 사용할 때, 특히 Safari에서 원형 이미지를 생성하려고 할 때 문제가 발생할 수 있습니다.

Safari에서 테두리 반경이 할당된 이미지는 이미지 자체가 아닌 요소의 외부 경계에서 잘립니다. 이는 이미지가 이미지와 배경색이 다른 컨테이너 안에 있을 때 더욱 분명해집니다.

이 문제를 해결하려면 이미지를 컨테이너 안에 배치하여 이미지와 테두리를 분리하세요. 그런 다음 이미지와 컨테이너 모두에 테두리 반경을 적용합니다.

<div class="activity_rounded">
  <img src="http://placehold.it/100" />
</div>

로그인 후 복사

.activity_rounded {
  display: inline-block;
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  border-radius: 50%;
  -khtml-border-radius: 50%;
  border: 3px solid #fff;
}

.activity_rounded img {
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  border-radius: 50%;
  -khtml-border-radius: 50%;
  vertical-align: middle;
}

로그인 후 복사

이렇게 하면 이미지와 테두리 모두 모서리가 둥글게 되어 Safari에서 이미지 주위에 원형 테두리가 생깁니다.

위 내용은 Safari에서 원형 이미지가 잘리는 이유는 무엇이며 어떻게 해결할 수 있습니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!