Как мне получить настоящий размер картинки?

Question

[zeni1agent]

Мне нужно получить настоящие реальное разрешение картинки.
Я уже все перебаловал

var im = new Image();
im.src = document.getElementById("id_image").src;
alert(im.width);

var width;
 var im = new Image();
 im.onload = function() {      
   width = this.width;
 }  
im.src = document.getElementById("id_image").src;
 alert(width);

var img = document.getElementById('id_image'); 
var width = img.clientWidth;
 alert(width);

var width = document.getElementById("id_image").scrollWidth;
alert(width);

var myimage = document.getElementById("id_image"); 
var rw = myimage.naturalWidth; 
 alert(rw);

$(document).ready(function() {
$("#id_image").load(function() {
    var height = $(this).height();
    var width = $(this).width();	
	alert(width);
});

Но он либо выводит размер дива либо 0.
Кто знает решение?

Comments

[RAX7]

https://www.w3schools.com/jsref/prop_img_naturalwi...

Answer 1

[Ragtime Kitty]

Так у вас и получилось вот тут:

var myimage = document.getElementById("id_image"); 
var rw = myimage.naturalWidth; 
 alert(rw);

Только убедитесь, что картинка загружена, или будет 0;

document.getElementById("id_image").onload = function() {
	alert(this.naturalWidth)
}

Comments

[zeni1agent]

.onload то срабатывает то нет.

[Ragtime Kitty]

zeni1agent, почему у вас может не срабатывать зависит уже от остального кода

E.g. скрипт без обертки, просто в конце body https://jsfiddle.net/gb20c7xe/

[zeni1agent]

Ragtime_Kitty,
Вот код который я использую

<div class="balans_image">
<div class="article">
<div class="absol">ghyy</div>
<img href="ff.jpg" id="id_image"/>
</div>
</div>

$('.article img').load(function(){
    $(this).removeAttr("width")
           .removeAttr("height")
           .css({ width: "", height: "" });
 
var width  = $(this).width();
var height = $(this).height();
	
 var gen_with = document.querySelector('.balans_image').scrollWidth / width;
 var gen_high = document.querySelector('.balans_image').scrollHeight / height;
 
 var dilete = Math.min(gen_with, gen_high);

 $('.article').css('height', height * dilete);	
$('.article').css('width', width * dilete);	
 
 document.getElementById("id_image").style.height =  (height * dilete)+"px";
 document.getElementById("id_image").style.width = "100%";
 });

И что в нем не так?
это код что-то вроде object-fit: contain; только для блока article.

[Ragtime Kitty]

И что в нем не так?

Хотя бы то, что вы задаете сурс картинки через href, затем сбрасываете атрибуты, которых нет, и задаете стили после загрузки.

Изначальный вопрос - как получить размеры картинки
Ответ - img.naturalWidth и img.naturalHeight

А как реализовать поведение object-fit: contain для блока - это уже другая история. Но вкратце - делается это версткой, а не вот этим вот всем.