이미지 리사이징 함수 - 라운드 변수 > 그누보드5 팁자료실

그누보드5 팁자료실

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

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

본문


<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>

 

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

클래스명을 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

 

예제 소스

 


<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>

 

위 예제 소스를

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

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

추천
7

댓글 9개


아니에요. css 를 이용하여 더 보편적으로 만드는 쉬운 방법이 있습니나. 이건 그냥 레벨유지용 우회팁입니다.ㅋ
전체 2,411 |RSS
그누보드5 팁자료실 내용 검색

회원로그인

(주)에스아이알소프트 / 대표:홍석명 / (06211) 서울특별시 강남구 역삼동 707-34 한신인터밸리24 서관 1404호 / E-Mail: admin@sir.kr
사업자등록번호: 217-81-36347 / 통신판매업신고번호:2014-서울강남-02098호 / 개인정보보호책임자:김민섭(minsup@sir.kr)
© SIRSOFT