찾다
일일 프로그램HTML 지식JS에서 이미지의 원래 너비와 높이를 얻는 방법

JS는 이미지의 원래 크기인 이미지의 원래 너비와 높이를 가져옵니다. HTML5 naturalWidth 및 naturalHeight 속성을 통해 이미지의 원래 크기를 얻을 수 있습니다. 이미지의 원래 너비와 높이는 HTML5 이미지 naturalWidth 및 naturalHeight 속성을 사용하여 쉽게 찾을 수 있습니다.

추천 참조: "JavaScriptTutorial"

JS에서 이미지의 원래 너비와 높이를 얻는 방법

그래서 앞쪽 기사에서는 이미지의 현재 너비와 높이를 얻는 JS 방법 을 소개했습니다. 실제로 필요한 친구는 원래 너비와 높이를 얻는 방법과 유사합니다. 먼저 참조할 수 있습니다.

아래에서는 특정 코드 예제를 계속 결합하여 원본 이미지 크기를 얻는 js 방법을 소개합니다.

코드 예시는 다음과 같습니다.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>js获取图片原始宽高的示例</title>
    <script type="text/javascript">
 function imgSize(){
            var myImg = document.querySelector("#sky");
            var realWidth = myImg.naturalWidth;
            var realHeight = myImg.naturalHeight;
            alert("原始 width=" + realWidth + ", " + "原始 height=" + realHeight);
 }
    </script>
</head>
<body>
<img  src="/static/imghwm/default1.png"  data-src="./1/png"  class="lazy"   id="sky"   style="max-width:90%"  alt="JS에서 이미지의 원래 너비와 높이를 얻는 방법" >
<p><button type="button" onclick="imgSize();">获取</button></p>
</body>
</html>

이미지의 현재 너비와 높이를 가져오는 clientWidth 및 clientHeight 속성과 다르며, 이미지의 원래 크기를 가져오는 것은 다음과 같습니다. 주로 naturalWidthnaturalHeight 속성을 통해 가능합니다. 이 두 속성으로 얻은 이미지의 원래 너비와 높이는 외부 너비 및 높이 속성 설정의 변경으로 인해 변경되지 않습니다.

여기서 사용하는 이미지의 원래 너비와 높이는 다음과 같습니다. 716x565px; 위의 js 코드를 사용하여 이미지의 원래 크기를 얻으면 다음과 같습니다.

JS에서 이미지의 원래 너비와 높이를 얻는 방법

참고: querySelector() 메서드는 문서와 일치하는 지정된 CSS를 반환합니다. 선택기의 요소입니다. querySelector() 메서드는 지정된 선택기와 일치하는 첫 번째 요소만 반환합니다. 모든 요소를 ​​반환해야 하는 경우 대신 querySelectorAll() 메서드를 사용하세요.


이 글은 이미지의 원래 너비와 높이를 얻는 js 방법에 관한 것입니다. 이 글도 매우 간단해서 필요한 친구들에게 도움이 되기를 바랍니다.

위 내용은 JS에서 이미지의 원래 너비와 높이를 얻는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.

핫 AI 도구

Undresser.AI Undress

Undresser.AI Undress

사실적인 누드 사진을 만들기 위한 AI 기반 앱

AI Clothes Remover

AI Clothes Remover

사진에서 옷을 제거하는 온라인 AI 도구입니다.

Undress AI Tool

Undress AI Tool

무료로 이미지를 벗다

Clothoff.io

Clothoff.io

AI 옷 제거제

Video Face Swap

Video Face Swap

완전히 무료인 AI 얼굴 교환 도구를 사용하여 모든 비디오의 얼굴을 쉽게 바꾸세요!

뜨거운 도구

Atom Editor Mac 버전 다운로드

Atom Editor Mac 버전 다운로드

가장 인기 있는 오픈 소스 편집기

mPDF

mPDF

mPDF는 UTF-8로 인코딩된 HTML에서 PDF 파일을 생성할 수 있는 PHP 라이브러리입니다. 원저자인 Ian Back은 자신의 웹 사이트에서 "즉시" PDF 파일을 출력하고 다양한 언어를 처리하기 위해 mPDF를 작성했습니다. HTML2FPDF와 같은 원본 스크립트보다 유니코드 글꼴을 사용할 때 속도가 느리고 더 큰 파일을 생성하지만 CSS 스타일 등을 지원하고 많은 개선 사항이 있습니다. RTL(아랍어, 히브리어), CJK(중국어, 일본어, 한국어)를 포함한 거의 모든 언어를 지원합니다. 중첩된 블록 수준 요소(예: P, DIV)를 지원합니다.

Dreamweaver Mac版

Dreamweaver Mac版

시각적 웹 개발 도구

SublimeText3 Linux 새 버전

SublimeText3 Linux 새 버전

SublimeText3 Linux 최신 버전

드림위버 CS6

드림위버 CS6

시각적 웹 개발 도구