仅在 html css 中将缩略图的背景图像网格放大到更高的分辨率

Posted 2023-05-08

【中文标题】仅在 html css 中将缩略图的背景图像网格放大到更高的分辨率

【英文标题】：Scale up background image grid of thumbnails to higher res in html css only

【发布时间】：2012-11-09 11:12:12

【问题描述】：

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

【参考方案1】：

您可以使用 CSS3 中的 background-size: 属性来做到这一点：

简单的 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/

【参考方案2】：

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

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

【讨论】：

这对画廊也有好处，因为 标签使图像与内容相关。所以谷歌和其他机器人可以看到图像与网站相关，而使用 bg 图像可以消除这一点。 +1