使用jquery/css/html在div标记中显示实际大小的图像
我正在开发一个asp.net mvc3应用程序。我的观点是使用剃刀，但我认为现在这已经不重要了。我需要一个图片库，你可以在其中删除和上传图像，以及其他一些我在网上看到的图片库中找不到的需求，所以我最终做出了自己的实现。
我在图库中用拇指显示真实大小的图像时遇到了问题。我做了一个小脚本来显示问题的本质：
<!DOCTYPE html>
<html>
<head>
<style>
.thumb-image { cursor: pointer;}
</style>
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
</head>
<body>
<img src="Forest.jpg" class="thumb-image" alt="Forest" height="300px" width="300px"/>
<script>
$('.thumb-image').click(function(){
$(this).hide();//
});
</script>
</body>
</html>我使用这个小脚本只是为了检查我是否可以从DOM到达图像(或者更确切地说，如何到达它-我知道这是可能的，只是我在JS/jQuery方面有非常基本的技能)。
所以我的问题是- Forest.jpg是我桌面上的一个图像，最初它是3550x2377px。现在我使用的是桌面上的图像--最初的图像是从服务器上获取的，但即便如此，我也没有保留任何缓存。<img>标记的样式只是为了实现某种缩略图效果，但图像以其完整大小下载到客户端。那么，有没有可能在某些<div> tag (本例中为3550x2377px)中以其实际大小显示此图像，而无需额外调用服务器或在我的情况下-再次传递图像的路径，但使用缩略图中的图像，该图像是以完整大小下载的，或者在我为width和height更改CSS之后，不可能再次获得真实大小？
回答 3
Stack Overflow用户
发布于 2013-06-07 12:46:36
不使用高度和宽度属性，而是使用类并使用jquery删除/隐藏类
.thumbimage {
height:300px;
width:300px;
}
$('.thumb-image').click(function(){
$(this).toggleClass('thumbimage');
});Stack Overflow用户
发布于 2013-06-07 12:49:21
通常，当您只需要显示一个小版本的图像文件时，使用引用大图像文件的img是一种糟糕的做法。这是因为浏览器仍然必须完全加载大版本的图像，这将是缓慢的，然后只以小版本显示它，这通常看起来并不好。
对于站点的用户来说，最好的方法是生成一个在img标记中显示的大图像的小版本，然后只有在用户单击它时才加载大图像。像这样，你的站点将会渲染得更快，使用更少的带宽等。
这将像这样完成：
<img src="Forest_thumb.jpg" class="thumb-image" alt="Forest" />
<script>
jQuery(function($) {
$('.thumb-image').click(function(){
$(this).hide();
$('<img src="Forest.jpg" class="full-image" alt="Forest" />')
.appendTo('.your-div');
});
});
</script>在你的例子中，通过指定宽度和高度来使用大图片作为缩略图，浏览器已经获取了大图片，所以如果你之后使用大图片，它将不会再次从你的服务器上获取，而是从浏览器缓存中获取。
例如，如果你想让你的大图保持缩略图，并在点击img-Tag时显示大图，你可以像这样用jQuery从你的img标签中删除宽度和高度：
$('.thumb-image').click(function(){
$(this).removeAttr('width').removeAttr('height');
});Stack Overflow用户
发布于 2013-06-07 12:49:41
在click()函数中，如果要将图像大小调整为原始大小：
$(this).removeAttr("width").removeAttr("height");或者，如果您想要具有原始大小的图像副本：
var img = $("<img/>").attr("src", $(this).attr("src")).load(function() {
// your image dimensions:
pic_real_width = this.width;
pic_real_height = this.height;
// show full-size image
$('body').append(img);
});https://stackoverflow.com/questions/16976249
复制相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号