0

嗨，我正在使用“背景图像”制作一个简单的缩略图网格（2x3），可以是横向或纵向的，效果很好。但我希望他们在悬停时放大到更高分辨率的图像。我认为高分辨率的需要以某种方式隐藏。谢谢

4

2 回答 2

2

您可以使用background-size:CSS3 中的属性来执行此操作：

简单的 HTML：

<div class="wrapper">
    <div class="thumb"></div>
    <div class="thumb"></div>
    <div class="thumb"></div>
    <div class="thumb"></div>
    <div class="thumb"></div>
    <div class="thumb"></div>
    <span class="clear"></span>
</div>​

CSS：

.wrapper
{
    width: 300px;
    height: 200px;
}

.thumb
{
    background: url(http://placehold.it/100x100) no-repeat;
    background-size: 50% 50%; /*CSS3*/
    background-position: 50% 50%;
    width: 100px;
    height: 100px;
    float: left;
    -webkit-transition: background-size 1s; /*CSS3*/
    -moz-transition: background-size 1s; /*CSS3*/
}

.thumb:hover
{
    background-size: 100% 100%;
    -webkit-transition: background-size 1s; /*CSS3*/
    -moz-transition: background-size 1s; /*CSS3*/
    cursor: pointer; 
}

span.clear
{
    display: block;
    height: 0;
    width: 100%;
    clear: both;
}
​

您所做的是立即提供更高分辨率的图像，然后使用background-size:属性按比例缩小它们。然后在悬停时放大图像。这可以防止加载每个图像的两个版本，并且使用 CSS3 转换它看起来也很酷；）

请记住，这是 CSS3，所以（我认为）IE8 及更低版本不支持此功能。

http://jsfiddle.net/Kyle_Sevenoaks/CFM5Q/

于 2012-11-21T09:25:13.443 回答
1

这是对凯尔答案的修改。我不确定它是否适合您的需求（不使用background-image，而只是一个<img>标签），但我发布它以防万一有人发现它有用。除了使用背景大小，还可以使用 CSS3 变换（scale在这种情况下）和过渡。

http://jsfiddle.net/vheVk/1/

于 2012-11-21T09:37:39.900 回答