如何制作缩略图<img>在点击时显示完整尺寸的图像？
要制作缩略图，可以使用HTML和JavaScript。以下是一个简单的示例，展示了如何在点击缩略图时显示完整尺寸的图像：
- 首先，在HTML中创建一个缩略图和一个完整尺寸的图像元素：
<!DOCTYPE html>
<html>
<head>
<style>
.thumbnail {
width: 100px;
height: 100px;
cursor: pointer;
}
.full-size {
display: none;
max-width: 100%;
max-height: 100%;
}
</style>
</head>
<body>
<img src="thumbnail.jpg" class="thumbnail" onclick="showFullSizeImage()" />
<img src="full-size.jpg" class="full-size" id="full-size-image" />
</body>
</html>- 接下来，使用JavaScript编写一个函数，当点击缩略图时，显示完整尺寸的图像：
function showFullSizeImage() {
var fullSizeImage = document.getElementById("full-size-image");
if (fullSizeImage.style.display === "none") {
fullSizeImage.style.display = "block";
} else {
fullSizeImage.style.display = "none";
}
}
</script>这个示例中，缩略图和完整尺寸的图像都是通过HTML的<img>标签加载的。当用户点击缩略图时，JavaScript函数showFullSizeImage()会被调用，完整尺寸的图像会显示或隐藏。
注意：这个示例仅用于演示目的，实际应用中可能需要进行更多的优化和调整。
相关·内容
有没有什么好的/插件可以在点击时“快速浏览”图片？与页面上的一些图片类似，请参阅“导入”下的第一张图片。我不是在寻找像lightbox这样复杂的东西，
浏览 0提问于2010-02-14得票数 4
回答已采纳
2回答
图像存储在我的文件夹中，而不是数据库中。当我点击其中一张图片时，它会引导我在下一页看到更多信息。这意味着我可以看到更大尺寸的图像。<table><th class="timgB"><h4><img src="city/GVce
浏览 1提问于2013-03-29得票数 0
4回答
我已经看到很多网站将图片缩小到缩略图大小，例如在搜索页面上显示，直到用户实际点击其中一个来查看它的全部大小。
为什么生成上传图像的缩略图版本是很好的做法？为什么不使用设置高度和宽度的img标记呢？编辑在阅读了几个答案之后，我意识到我的问题措辞可能很糟糕。所以，我的意思是，即使图片的大小是在CSS中指定的，也是完
浏览 11提问于2017-06-01得票数 0
回答已采纳
1回答
缩略图显示全尺寸
、、
我正在制作一个基本的html5 5/css网页。由于某些原因，当我在浏览器中查看页面时，缩略图图像显示为全尺寸。为了制作缩略图，我打开了大的原版油漆。我把它调整到150 as的宽度，它计算出高度为185 as。然后我用大拇指的名字保存了它。<a href="
浏览 2提问于2014-07-19得票数 0
回答已采纳
Contexxt:我目前正在开发一个web应用程序，它使用的是用Silex编写的API，使用的是written。
非常好，我想，我制作了API，所以它以base64 64编码的方式返回图像
浏览 4提问于2015-05-20得票数 0
回答已采纳
我正在制作一个画廊网页，有小的缩略图和一个更大的容器div来显示选定的图像。缩略图图像是300x300存储在缩略图文件夹中，但是我希望能够单击缩略图，并让它调用具有与其缩略图副本相同名称的“图像”文件夹中的全分辨率图像。所以thumbanil 1应该是src="thumb/
浏览 2提问于2015-12-16得票数 1
2回答
我有一个壁纸画廊页面，显示小缩略图，当点击它打开原来的全尺寸图像供用户下载。
<a href="images/wallpaper.jpg">
<
浏览 0提问于2017-08-13得票数 2
回答已采纳
1回答
如果background-size是一个非常方便的属性，至少有两种情况：
调整背景以创建动画效果。但是，对于静态(在意义上，不需要调用任何类型的动画效果)内容来说，绝对调整背景又如何呢？我们总是可以调整图像的大小，我们需要在不调用background-size属性的情况下调整大小。因此，由于这是一个相对较新的属性，我对如何正确使用它没有任何感觉，我的问题是:谈论绝对值，什么
浏览 2提问于2012-12-18得票数 1
回答已采纳
1回答
我正在制作一个页面，显示用户的所有包含图片的帖子。有时，每个导航会检索100篇或更多的帖子(如facebook)。
我应该如何处理它们上的图像。它们是图片的最小宽度:480px和它达到的长度。什么是最好的优化页面，以节省资源。并避免延迟或页面过载。1)例如，如果我将一个480px-660px的图片包装在一个480px-240px的溢出div容器中，它会使图
浏览 0提问于2018-03-01得票数 0
在一个网页上，我想要显示图像的完整版本以及同一图像的缩略图版本。我知道通常情况下，使用图形程序来缩小图像比使用html img标签来缩小图像节省带宽。但是，如果我已经在页面上显示了全尺寸的图像，那么在任何一种情况下都可能只下载一次，所以在页面上的两个地方使用相同的</
浏览 5提问于2014-01-24得票数 1
许多应用程序，如Tweetbot，在其表视图控制器中显示缩略图，以获得更高分辨率的图像。例如，这个图像显示了一个缩略图，当点击该缩略图时，显示更大的图像：但是，我很困惑这些图像是如何加载的。我的想法是，原来的图像是加载，然后缩小到缩略图<
浏览 8提问于2013-11-18得票数 8
2回答
jQuery图片库
、、、
我已经实现了一个相册，它在Web页面中呈现一系列图像缩略图( 200px)，但我也想让用户通过单击缩略图来显示图片的全尺寸视图。全尺寸视图应该通过隐藏缩略图索引显示在同一页中。因此，一旦用户关闭完整大小的图像，缩略图索引将再次显示。我有下面的代码，它从一个JSON文件中读取所有图片，并将它们附加到div#images中，并使用<
浏览 3提问于2012-10-17得票数 0
我用jQuery：制作了一个灯箱风格的画廊。在这个小提琴和Chrome中工作的东西在任何其他浏览器上都不起作用。').attr('src',imageSource);当单击完整图像时，完全视图将被关闭： $当我第二次单击缩略图时，浏览器只导航到完整
浏览 0提问于2013-08-20得票数 0
回答已采纳
1回答
渐进图像加载技术
、、、
当我通过Google 搜索图像时，它首先加载模糊图像，然后以下面的图像递增加载高质量的图像。
但是，通过检查该图像，我找到了，并通过该链接加载完整的图像或加载的图像被视为自上而下的预览，如下图所示。怎么发生的？谷歌用于图像渐进加载的技术。我怎样才能像谷歌一样在
浏览 1提问于2013-08-22得票数 1
回答已采纳
1回答
试图在缩略图悬停时显示大图像
、、、、
我试图创建一个缩略图库，一旦缩略图被悬停，它将在一个单独的框中显示完整大小的版本。<img class="thumb1" src="image.jpg">
而实际的、全尺寸
浏览 2提问于2016-11-16得票数 3
1回答
我想删除白色的背景，并显示整个图像在固定宽度的大小使用花式框，因为现在它是显示鸡蛋形状的图像。我是否遗漏了一些配置更改？我使用的是fancyBox v2.1.5 和下面的库 jquery.fancybox.css jquery.fancybox.css "slideShow&qu
浏览 28提问于2019-03-20得票数 0
回答已采纳
1回答
我正在建立一个投资组合页面，其中包含相当多的图像。我从一个数据库中拉出图像的网址，并从原始来源创建缩略图，并显示缩略图。当点击时，显示原始的全尺寸图片。加载时间明显受到影响，网站需要一段时间才能显示任何内容...
我试过把所有这些都放在Ajax中，但似乎只有在站点已经初始加载的情况下，ajax才是有效的。就像现
浏览 0提问于2011-11-03得票数 1
回答已采纳
我正在寻找一个图片库插件，将显示缩略图与他们下面的标题，并仍然允许他们通过点击完整的图像，最好与幻灯片模式允许。我确实尝试了NextGen插件，但尽管在我的图片中添加了标题，但它们只显示在全尺寸视图中，而不是在缩略图上。谢谢
浏览 0提问于2012-07-20得票数 -1
我在mysql数据库中有两个图像数组，我正试图遍历它们并显示它们。一个数组包含一个名为“postImage”的数组，其大小为全尺寸图像，另一个称为“缩略图”，用于保存这些图像的缩略图。但是，一个数组用于<a>链接，我想将其指向完整大小的图像，而另一个数组用于<a>链接中的<img>标记。我正在
浏览 2提问于2020-08-04得票数 0
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
对象存储
即时通信 IM
实时音视频活动推荐
腾讯云开发者
