Плавное изменение размера изображения

Наша img:

<img src="images/logo/icon-256.png" class="one"/>

Вариант 1, С JQuery и CSS:

 $(".one").mouseenter(function() {

        $(this).css({
           "-webkit-transition": "all 1s linear",
            "width": "50px",
            "height":"50px"
        });

    }) .mouseleave(function() {

        $(this).css({
            "-webkit-transition": "all 1s linear",
            "width": "256px",
            "height":"256px"
        });

    });

С примерами о взаимодействии CSS и JQuery посмотрите здесь.

Вариант 2, без CSS:

// increase factor
var factor = 2;

$('.one').click(function() {
    $(this).animate({
        top: '-=' + $(this).height() / factor,
        left: '-=' + $(this).width() / factor,
        width: $(this).width() * factor
    });
});

Здесь с примерами о animate прочитайте.

Готовое решение, специально для автора:

HTML

 <input type="text" size="40" class="width">
 <input type="text" size="40" class="height">

 <img src="images/logo/icon-256.png" class="one" />

JQuery:

$(".width").keypress(function(){

    $(".one").css({
        "-webkit-transition": "all 1s linear",
        "width":$(this).val(),
        "height": $(".height").val()
    });

});

$(".height").keypress(function(){
    $(".one").css({
        "-webkit-transition": "all 1s linear",
        "width":$(".width").val(),
        "height": $(this).val()
    });
});

Я, конечно, все понимаю, но готовые решения приводят к лени, а лень сами знаете к чему, посему советую понемногу изучать все самостоятельно. Да и не напасешься готовых ответов в программировании, даже столь простых штук.