Как получить значение ширины и высоты у фото?

Question

[Space]

Привет. Как получить значение ширины и высоты у фото?

function preview(img, selection) {
    var scaleX = 100 / (selection.width || 1);
    var scaleY = 100 / (selection.height || 1);
    $('#photo + div > img').css({
        width: Math.round(scaleX * 300) + 'px',
        height: Math.round(scaleY * 225) + 'px',
        marginLeft: '-' + Math.round(scaleX * selection.x1) + 'px',
        marginTop: '-' + Math.round(scaleY * selection.y1) + 'px'
    });
}

Эти строчки указывают на ширину и высоту:

width: Math.round(scaleX * 300) + 'px',
height: Math.round(scaleY * 225) + 'px',

как получить у данной картинки эти параметры?

Answer 1

[Александр Петров]

$('#photo + div > img').width();
$('#photo + div > img').height();

Comments

[Space]

@dzhiriki

function preview(img, selection) {
    var scaleX = 100 / (selection.width || 1);
    var scaleY = 100 / (selection.height || 1);
    $('#photo + div > img').css({
        $('#photo + div > img').width(),
        $('#photo + div > img').height(),
        marginLeft: '-' + Math.round(scaleX * selection.x1) + 'px',
        marginTop: '-' + Math.round(scaleY * selection.y1) + 'px'
    });
}

перестает работать вообще

[Space]

@dzhiriki

function preview(img, selection) {
    var scaleX = 100 / (selection.width || 1);
    var scaleY = 100 / (selection.height || 1);
	var heo = $('#photo + div > img').width();
    var wio = $('#photo + div > img').height();
    $('#photo + div > img').css({
        width: wio,
        height: heo,
        marginLeft: '-' + Math.round(scaleX * selection.x1) + 'px',
        marginTop: '-' + Math.round(scaleY * selection.y1) + 'px'
    });
}

так работает функционал, но не корректно

[Александр Петров]

Еще бы.
width: $('#photo + div > img').width()+'px',
height: $('#photo + div > img').height()+'px'
Но что вы хотите сделать? Зачем устанавливать ширину картинки в ширину картинки? Или требуется установить ширину картинки равную ширине самой картинки? Т.е. если картинка 1080px, то и установить 1080?

[Space]

@dzhiriki да именно) только уже все сделал, оказывается переменные не туда вставил) спасибо)

Answer 2

[Sergey Litvinchuk]

function preview(img, selection) {
    var scaleX = 100 / (selection.width || 1);
    var scaleY = 100 / (selection.height || 1);
    var $img = $('#photo + div > img');
    $img.css({
        width: Math.round(scaleX * 300) + 'px',
        height: Math.round(scaleY * 225) + 'px',
        marginLeft: '-' + Math.round(scaleX * selection.x1) + 'px',
        marginTop: '-' + Math.round(scaleY * selection.y1) + 'px'
    });

   var width = $img.width();
   var height = $img.height();

   // если нужно реальные размеры изображения а не заданные html
   var natural_width = $img.get(0).naturalWidth;
   var natural_height = $img.get(0).naturalHeight;
}

Comments

[Space]

@RedFiber как указать у какой именно картинке брать?

[Sergey Litvinchuk]

у нас же в селекторе указано какая картинка?
$('#photo + div > img')
Или у какой картинки узнать ширину нужно? Если в функцию передается елемент картинки в переменную img то можно вместо $('#photo + div > img') написать $(img)