0

mouseover で画像を操作したいのですが、幅だけが変わりますが、高さは変わりません。イメージ キャンバスが実際のイメージと一致しないことがわかりました。そのため、彼の手はもう見えません。どうすれば幅を伸ばすことができますか？

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;
}
4

2 に答える 2

0

秘訣は、background-size に幅と高さの両方の引数を渡すことができることです。幅を 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 からその属性を単純に削除できます。

編集: このフィドルには以下の 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'});
  });
});
于 2013-08-12T00:46:07.770 に答える