CSS로 직사각형 이미지를 원형으로 만드는 방법
내가 사용한 적이 border-radius: 50%거나 border-radius: 999em,하지만 문제는 동일합니다 : 제곱 이미지에 문제가 없지만 직사각형 이미지 나는 타원형 원을 얻을 수 있습니다. 나는 또한 이미지의 일부를 자르는 경향이 있습니다 (분명히). 할 수있는 방법이 있나요 순수한 CSS와 (또는 자바 스크립트 / jQuery를 적어도)하는를 사용하지 않고 <div>로모그래퍼 background-image하지만, 사용하는 경우에만 <img>태그를?
귀하의 문제 는 스타일 시트 내의 각 이미지에 대한 소스 background-image가 비효율적 이라는 것입니다 . 내 제안은 소스를 인라인으로 설정하는 것입니다.
<div style = 'background-image: url(image.gif)'></div>
div {
background-repeat: no-repeat;
background-position: 50%;
border-radius: 50%;
width: 100px;
height: 100px;
}
유일한 답변에 대한 의견이 다소 미치기 때문에 내 2cents. 이것은 내가 일반적으로하는 일입니다. 원의 경우 사각형으로 시작해야합니다. 이 코드는 정사각형을 만들고 이미지를 늘립니다. 이미지가 최소한 라운드 div의 너비와 높이가 될 것이라는 것을 알고 있다면 img스타일 규칙을 제거하여 늘이지 않고 잘릴 수 있습니다.
<html>
<head>
<style>
.round {
border-radius: 50%;
overflow: hidden;
width: 150px;
height: 150px;
}
.round img {
display: block;
/* Stretch
height: 100%;
width: 100%; */
min-width: 100%;
min-height: 100%;
}
</style>
</head>
<body>
<div class="round">
<img src="image.jpg" />
</div>
</body>
</html>
Bootstrap 3을 사용하는 사람들에게는 작업을 수행 할 수있는 훌륭한 CSS 클래스가 있습니다.
<img src="..." class="img-circle">
테두리 반경을 사용하여 정사각형에서만 원을 만들 수 있습니다.
border-radius는 높이나 너비를 늘리거나 줄이지 않습니다.
귀하의 요청은 이미지 태그 만 사용하는 것입니다. 태그가 정사각형이 아닌 경우 기본적으로 불가능합니다.
빈 이미지를 사용하고 bg에서 다른 이미지를 설정하려는 경우 설정할 각 이미지에 대해 하나의 배경이 고통 스러울 것입니다.
자르기 작업은 래퍼가있는 경우에만 수행 할 수 있습니다. 이 경우에는 여러 가지 방법이 있습니다.
@fzzle의 답변을 기반으로- 고정 높이 또는 너비를 정의하지 않고 사각형에서 원을 얻으 려면 다음이 작동합니다. padding-top : 100 %는 circle-cropper div에 대해 1 : 1 비율을 유지합니다. 인라인 배경 이미지를 설정하고 중앙에 배치하고 background-size : cover를 사용하여 초과분을 숨 깁니다.
CSS
.circle-cropper {
background-repeat: no-repeat;
background-size: cover;
background-position: 50%;
border-radius: 50%;
width: 100%;
padding-top: 100%;
}
HTML
<div class="circle-cropper" role="img" style="background-image:url(myrectangle.jpg);"></div>
다음과 같이 만들 수 있습니다.
<html>
<head>
<style>
.round {
display:block;
width: 55px;
height: 55px;
border-radius: 50%;
overflow: hidden;
padding:5px 4px;
}
.round img {
width: 45px;
}
</style>
</head>
<body>
<div class="round">
<img src="image.jpg" />
</div>
</body>
이것은 높이와 너비를 알고 있다면 잘 작동합니다.
img {
object-fit: cover;
border-radius: '50%';
width: 100px;
height: 100px;
}
https://medium.com/@chrisnager/center-and-crop-images-with-a-single-line-of-css-ad140d5b4a87을 통해
다음은 나를 위해 일했습니다.
CSS
.round {
border-radius: 50%;
overflow: hidden;
width: 30px;
height: 30px;
background: no-repeat 50%;
object-fit: cover;
}
.round img {
display: block;
height: 100%;
width: 100%;
}
HTML
<div class="round">
<img src="test.png" />
</div>
I've been researching this very same problem and couldn't find a decent solution other than having the div with the image as background and the img tag inside of it with visibility none or something like this.
One thing I might add is that you should add a background-size: cover to the div, so that your image fills the background by clipping it's excess.
<html>
<head>
<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
<style>
.round_img {
border-radius: 50%;
max-width: 150px;
border: 1px solid #ccc;
}
</style>
<script>
var cw = $('.round_img').width();
$('.round_img').css({
'height': cw + 'px'
});
</script>
</head>
<body>
<img class="round_img" src="image.jpg" alt="" title="" />
</body>
</html>
http://jsfiddle.net/suryakiran/1xqs4ztc/
참고URL : https://stackoverflow.com/questions/22577371/how-to-make-rectangular-image-appear-circular-with-css
'IT TIP' 카테고리의 다른 글
| 제한 및 주문과 결합 된 ActiveRecord find_each (0) | 2020.11.21 |
|---|---|
| 별도의 어셈블리에서 컨텍스트로 마이그레이션을 사용 하시겠습니까? (0) | 2020.11.21 |
| 텍스트가 허용 된 것보다 큰 경우 CSS로 오버플로시 텍스트 페이드 아웃 (0) | 2020.11.21 |
| S3 객체에 데이터 추가 (0) | 2020.11.21 |
| Java에서 ISO-8859-1과 UTF-8간에 어떻게 변환합니까? (0) | 2020.11.21 |