이미지 리사이징 함수 - 라운드 변수 정보
이미지 리사이징 함수 - 라운드 변수본문
<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
7
댓글 9개
활용도가 높은 팁 항상 고맙습니다.
@rainbi
아니에요. css 를 이용하여 더 보편적으로 만드는 쉬운 방법이 있습니나. 이건 그냥 레벨유지용 우회팁입니다.ㅋ
아니에요. css 를 이용하여 더 보편적으로 만드는 쉬운 방법이 있습니나. 이건 그냥 레벨유지용 우회팁입니다.ㅋ
좋아요. 감사합니다.
@들레아빠 약간 더 업그레이드 하였습니다.
@비타주리 네, 확인 하였습니다. 좋아요.
@들레아빠 감사합니다
유용한 정보네요 감사합니다.
@브러운아이 예 감사합니다
감사합니다.