Question

我有一个包含小缩略图的投资组合，每个缩略图都在灯箱中打开。我试图将缩略图显示为放大的图像。请注意，我为大版本和缩略图调用相同的图像，所以我需要找出一种方法来使用css和/或javascript来缩放缩略图，这样它们的大小都相同，但放大得很近。 / p>

这是在灯箱中炸毁时全尺寸图片的示例：http://grab.by/Ax74 这是当前的缩略图：http://grab.by/Ax7a 这就是我希望缩略图看起来像（或者有点类似于此放大）：http://grab.by/Ax7k

提前感谢您的帮助。

Answer 1

您可以将css background-image与css background-size结合使用检查此工作Fiddle

e.g。

CSS

#div1 {
    background-image: url("url/path");
    background-size: 200px 200px;
}

编辑：

很难不使用CSS背景...... 有关详情，请查看this以及此question

然而，这是另一个Fiddle。我希望它符合你的需求......

.thumbnail {
    width: 64px;
    height: 64px;
    background-size: 200px 200px;
    background-position: center; //shows only center of full width image
}



.full {
    width: 609px;
    height: 447px;
    cursor: pointer;
    background-size: 100% 100%;
    background-position: initial;
}

还有一点点javascript

function fullImage() {
    $("#thumbnail").toggleClass("full");
}

使用css裁剪或缩放图像

1 个答案:

CSS

编辑：