<img src="/image/blah.jpeg"
onLoad = {(e) => {
const img = e.target;
console.log("img 넓이" , img.width);
console.log("img 높이" , img.height);
console.log("img 원본 넓이" , img.naturalWidth);
console.log("img 원본 높이" , img.naturalHeight);
}}
/>
onLoad는 이미지가 로드된후 실행하는 함수이다.
img.width를 찍어보면 이미지가 출력된 후의 조정된 사이즈(상의 div등에 의해) 가 출력된다
Intrinsic size (원본사이즈)가 알고싶다면, img.naturalWidth 로 알수있다.
Rendered size => img.width
Intrinsic size => img.naturalWidth
728x90
반응형
'Front-end > HTML' 카테고리의 다른 글
티스토리 코드 블럭 하이라이트, 라인 넘버, 폰트 설정하기 (2) - 라인 넘버, 폰트 설정 (0) | 2021.11.13 |
---|---|
티스토리 코드 블럭 하이라이트, 라인 넘버, 폰트 설정하기 (1) - 하이라이트 (0) | 2021.11.12 |
댓글