div에서 이미지의 적응형 크기를 구현하는 순수 js(테스트 완료, Firefox와 호환 가능)_javascript 기술

이 코드로 구현된 기능은 img가 포함된 div를 발견했을 때 img 이미지의 크기를 알 수 없고 div의 크기도 알 수 없을 때 이미지 자체가 더 작을 때 이미지가 크기에 맞게 조정된다는 것입니다. div 컨테이너의 크기보다 크면 처리가 수행되지 않습니다. 늘리면 사진이 왜곡될 수 있기 때문입니다.

더 이상 고민하지 말고 바로 코드로 넘어가겠습니다. 테스트를 거쳤으며 Firefox, Google, IE6, IE7/8과 호환됩니다.

다음은 js 코드입니다.

코드 복사 코드는 다음과 같습니다.

다음은 HTML 코드입니다.

코드 복사

코드는 다음과 같습니다.

다음은 CSS 코드입니다.

코드 복사

코드는 다음과 같습니다. .sy_pic{ width:200px; height:300px; border:#000 solid 5px; align:center;}

이미지 주소를 직접 변경하세요. 질문이나 조언이 있으시면 QQ 그룹: 255708401에 가입하세요.