使用css裁剪或缩放图像

I have a portfolio with small thumbnails that each open in a lightbox. I'm trying to display the thumbnails as enlarged images. Note, I'm calling the same image for both large version and thumbnail so i need to figure out a way to use css and/or javascript to size thumbnail so they are all the same size, but zoomed in very close.

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

Here's a sample of the full size image when blown up in a lightbox: http://grab.by/Ax74 Here's the current thumbnail: http://grab.by/Ax7a Here's what I want the thumbnail to look like (or zoomed in somewhat similar to this): http://grab.by/Ax7k

以下是在灯箱中炸毁时全尺寸图像的示例:http://grab.by/Ax74这是当前的缩略图:http://grab.by/Ax7a这就是我希望缩略图看起来像(或缩放)在某种程度上类似于此):http://grab.by/Ax7k

Thanks in advance for the help.

在此先感谢您的帮助。

1 个解决方案

#1

You could use css background-image in combination with css background-size Check this working Fiddle

您可以将css background-image与css background-size结合使用检查这个工作小提琴

e.g.

CSS

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

EDIT:

Well its pretty hard not using CSS Backgrounds... for more information check this and also this question

那么它很难不使用CSS背景...更多信息检查这个以及这个问题

nevertheless here is another Fiddle. I hope it suits your needs...

尽管如此,这是另一个小提琴。我希望它符合你的需求......

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

and also a lil bit javascript

还有一点点javascript

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