프레임에 이미지 꽉 채우기 Part2(Javascript)

** 이 글은  프레임에 이미지 꽉 채우기 Part1(CSS)에 이어진 글입니다.

이번에는 자바스크립트를 이용한 방식이다.

Javascript로 꽉 채우기.

우선 소스...

See the Pen 이미지 꽉 채우기(javascript) by owen (@wooner) on CodePen.

imgAlign이라는 함수를 만들었다.

함수가 길고 복잡하니 함수에 대한 설명은 하지 않고 사용법에 대해서만 기록한다.

우선 css스타일이 있어야 한다.

img.h100p {
    height: 100% !important;
    width: auto !important;
    position: relative
}
img.w100p {
    width: 100% !important;
    height: auto !important;
    position: relative;
}

자바스크립트로 width와 height값을 처리하지 않고 클래스를 add, remove 해서 위치를 맞춘다. 그게더 속도가 빠르다고 해서 이렇게 한건데.. 실상은 잘 모르겠다.

함수 실행할때 인자는 여러 방법으로 넘길 수 있다. 인자로는 이미지를 싸고있는 박스를 css selector방식으로 넘긴다.

imgAlign('.imgBx'); //jquery로 씌워서 해당 element를 찾음
imgAlign(['.imgBx', '.imgBx2']); //배열을 돌면서 jquery로 씌워서 해당 element를 찾음
imgAlign($('.imgBx')); //이미 jquery로 싸여 있으므로 바로 element를 찾음
imgAlign('.imgBx', {resize : ture}); //리사이즈 될때마다 위치를 재 계산함.