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

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

WBOY
WBOY원래의
2016-05-16 16:44:231180검색

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

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

다음은 js 코드입니다.

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




다음은 HTML 코드입니다.



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



코드 복사
이미지 주소를 직접 변경하세요. 질문이나 조언이 있으시면 QQ 그룹: 255708401에 가입하세요.
성명:
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.