이미지 리사이징 함수 - 라운드 변수

[code]

<style>
.rectangleCrop { width:100%; height:100%; display:block; object-fit:cover; border-radius:30px; }
</style>

<div class=rectangleClass style=width:가로길이><img class=rectangleCrop src=이미지주소></div>

<script>
heightPercent = 80;
rectangleDiv = document.getElementsByClassName("rectangleClass");
for (r in rectangleDiv) rectangleDiv[r].style.height = rectangleDiv[r].offsetWidth * heightPercent / 100 + 'px';
</script>

[/code]

위의 자바스크립트 소스 사용하면...

클래스명을 rectangleClass 로 준 div 안에 클래스명을 rectangleCrop 으로 준 이미지를 가로 세로 길이에 상관 없이 무조건 옵션으로 준 변수 퍼센트대로 리사이징 합니다. 그 이외의 부분은 잘라 버리죠.

<div class=rectangleClass><img class=rectangleCrop src=이미지주소></div>

<style> 에서 border-radius:30px 은 테두리의 라운드 수치로 픽셀이나 퍼센트로 주면 되구요...

50% 는 원형이 됩니다.

가로 세로 사이즈는 div 의 style 에서 width 값을 따릅니다.

자바스크립트에서

heightPercent = 100;  는 가로를 100퍼센트로 주었을 때의 세로 퍼센트입니다.

예제 이미지

https://blog.kakaocdn.net/dn/d26tHc/btrbmx09iok/QIJAxZatmdlcmwMavoLOgk/img.jpg

https://blog.kakaocdn.net/dn/biX36N/btrbpOORb8r/eHuuafEDnZy871qwExF5Hk/img.jpg

https://blog.kakaocdn.net/dn/cxYEsB/btrblj3aFtd/869SF00wBPbnvBmBF8j621/img.jpg

예제 소스

[code]

<style>
.rectangleCrop { width:100%; height:100%; display:block; object-fit:cover; border-radius:50%; }
</style>

<div class=rectangleClass style=width:300px><img class=rectangleCrop src=https://blog.kakaocdn.net/dn/d26tHc/btrbmx09iok/QIJAxZatmdlcmwMavoLOgk/img.jpg></div>
<div class=rectangleClass style=width:50%><img class=rectangleCrop src=https://blog.kakaocdn.net/dn/biX36N/btrbpOORb8r/eHuuafEDnZy871qwExF5Hk/img.jpg></div>
<div class=rectangleClass style=width:60%><img class=rectangleCrop src=https://blog.kakaocdn.net/dn/cxYEsB/btrblj3aFtd/869SF00wBPbnvBmBF8j621/img.jpg></div>

<script>
heightPercent = 100;
rectangleDiv = document.getElementsByClassName("rectangleClass");
for (r in rectangleDiv) rectangleDiv[r].style.height = rectangleDiv[r].offsetWidth * heightPercent / 100 + 'px';
</script>

[/code]

위 예제 소스를

http://www.mediaplayer.kr/main/bbs/html_editor.php

에서 붙여넣기 하여 결과확인 해 보세요.