Как манипулировать изображением с помощью jQuery - только по горизонтали

Question

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

http://jsfiddle.net/Z8knE/3/

div 
{  
    background-image: url(http://t2.gstatic.com/images?q=tbn:ANd9GcQmloy1dlrNWhp8Y2u3lEKYEnLvJAqWVhggUIrA_QwRxjenmus-Ww); 
    -webkit-background-size: 100%; 
    -moz-background-size: 100%; 
    -o-background-size: 100%; 
    background-size: 100%; 
    height:150px; 
    width:150px; 
} 

Answer 1

Попробуйте что-то вроде этого:

JSFIDDLE

Вам не нужно использовать JQuery, просто использовать чистый CSS.

Снимите:

background-size:100% 150px; 

... и добавить:

max-height:150px; 

Answer 2

Хитрость заключается в том, что фон-размер может иметь как ширина и высота аргументы пройдена. Установите ширину до 100% и высоту любой желаемой статической высоты. Затем, когда окно расширяется, изображение будет расширяться и не выше.

http://jsfiddle.net/Z8knE/5/

div 
{  
    background-image: url(http://t2.gstatic.com/images?q=tbn:ANd9GcQmloy1dlrNWhp8Y2u3lEKYEnLvJAqWVhggUIrA_QwRxjenmus-Ww); 
    background-size: 100% 150px; 
    height:150px; 
    width:150px; 
} 

Или, если вы на самом деле не хотите, высоту на поле, чтобы изменить, как вы его в исходной скрипке, вы можете просто удалить этот атрибут из JQuery так:

Edit: Это скрипку содержит ниже Javascript http://jsfiddle.net/Z8knE/15/

$(document).ready(function(){ 
    $("div").mouseenter(function(){ 
     $("div").animate({width:"500px"},{duration: 1000, easing: 'easeOutBounce'}); 
    }); 
    $("div").mouseleave(function(){ 
     $("div").animate({width:"150px"},{duration: 1000, easing: 'easeOutBounce'}); 
    }); 
});