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

2

尝试这样的事情:

JSFIDDLE

您不需要使用 jQuery,只需使用纯 CSS。

消除:

background-size:100% 150px;

...并添加:

max-height:150px;
于 2013-08-12T00:41:19.217 回答
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 回答