使用 css 裁剪或缩放图像

Posted 2023-02-25

【中文标题】使用 css 裁剪或缩放图像

【英文标题】：Crop or Zoom an Image using css

【发布时间】：2014-09-20 17:10:52

【问题描述】：

我有一个带有小缩略图的作品集，每个都在灯箱中打开。我正在尝试将缩略图显示为放大的图像。请注意，我为大版本和缩略图调用了相同的图像，所以我需要找到一种方法来使用 css 和/或 javascript 来调整缩略图的大小，这样它们的大小都相同，但放大得非常接近。

以下是在灯箱中放大后的全尺寸图片示例：http://grab.by/Ax74 这是当前的缩略图：http://grab.by/Ax7a 这是我希望缩略图看起来的样子（或放大后的样子）：http://grab.by/Ax7k

提前感谢您的帮助。

【参考方案1】：

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

例如

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");

【讨论】：

我看到它确实可以裁剪，但我希望放大图像，最好不要用作背景图像。如果您有任何其他想法，请告诉我。感谢您的帮助！

放大是什么意思？你的意思是点击它让它显示得更大吗？

不，只是想显示更大的选择区域，以便看起来放大。查看我提供的屏幕截图。

检查我的问题。我又加了一个小提琴。