Вы можете легко найти исходную или внутреннюю ширину и высоту изображения, используя HTML5-свойства изображений naturalWidth и naturalHeight. Эти свойства поддерживаются во всех основных веб-браузерах, таких как Chrome, Firefox, Safari, Opera, Internet Explorer 9 и выше.
Давайте посмотрим на пример, чтобы понять, как это работает:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>JavaScript Find Real Image Width and Height</title>
<script>
function imgSize(){
var myImg = document.querySelector("#sky");
var realWidth = myImg.naturalWidth;
var realHeight = myImg.naturalHeight;
alert("Original width=" + realWidth + ", " + "Original height=" + realHeight);
}
</script>
</head>
<body>
<img src="sky.jpg" id="sky" width="250" alt="Cloudy Sky">
<p><button type="button" onclick="imgSize();">Получить исходный размер изображения</button></p>
</body>
</html>В качестве альтернативы, если вы хотите выполнить ту же задачу с помощью jQuery, вы можете использовать метод load() в сочетании с методом attr(), как показано в следующем примере:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery Get Real Image Dimensions</title>
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
var img = $("#sky");
// Получаем реальную ширину и высоту
$("<img>").attr("src", $(img).attr("src")).load(function(){
var realWidth = this.width;
var realHeight = this.height;
alert("Original width=" + realWidth + ", " + "Original height=" + realHeight);
});
});
});
</script>
</head>
<body>
<img src="sky.jpg" id="sky" width="250" alt="Cloudy Sky">
<p><button type="button">Получить исходный размер изображения</button></p>
</body>
</html>
