<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gbk" />
<title>js图片不变形缩略图</title>
<script>
/** 检测图像属性 */
function CheckProperty(obj) {
var ImgObj=new Image();
ImgObj.src = obj.src;
FileObj=ImgObj;
/*
if(ImgObj.readyState!="complete") //如果图像是未加载完成进行循环检测
{
setTimeout("CheckProperty(FileObj)",500);
}
ImgFileSize=Math.round(ImgObj.fileSize/1024*100)/100;//取得图片文件的大小
*/
//取得图片的宽度
ImgWidth=ImgObj.width
//取得图片的高度
ImgHeight=ImgObj.height;
cut(obj , ImgWidth , ImgHeight);
setCenter(obj);
}
/** 设置图片层的上一层居中 */
function setCenter(obj){
if(navigator.userAgent.indexOf("MSIE") <= 0){
obj.parentNode.style.display = 'table-cell';
} else {
obj.parentNode.style.display = 'block';
obj.parentNode.style.fontSize = obj.parentNode.height*0.873;
obj.parentNode.style.fontFamily = 'Arial';
}
obj.parentNode.style.verticalAlign = 'middle';
obj.parentNode.style.textAlign = 'center';
}
/** 裁剪图片 */
function cut(obj , width , height){
if(obj.width > obj.height) {
obj.width = width*obj.height/height;
} else {
obj.height = height*obj.width/width;
}
}
</script>
</head>
<body>
<div height="500" style="width:500px;height:500px;border: 3px solid #eee;">
<img src='1.jpg' onload='CheckProperty(this)' width='400' height='300'></div>
</body>
</html>
摘自：http://hi.baidu.com/yujuan260/item/41966612ca1907061994ec38
分享到：
相关推荐
"java 图片生成缩略图" Java 图片生成缩略图是Java程序开发中一个常见的需求，通过将图片以缩略图形式展示，可以提高用户体验和网站性能。在本文中，我们将介绍使用Java生成缩略图的方法。 缩略图生成方法 在 ...
在JavaScript编程中，实现一个带有缩略图的图片切换效果并配备控制按钮是一项常见的需求，尤其是在网站设计和用户界面开发中。这样的功能可以为用户提供更好的交互体验，让他们更轻松地浏览一组图片。以下是对这个...
在JavaScript编程领域，生成高清缩略图是一项常见的需求，尤其在网页设计中，为了提高页面加载速度和用户体验，我们通常需要对大尺寸的图片进行压缩处理。本实例着重讲解如何利用JavaScript实现类似“凡客诚品”网站...
不变形的缩略图意味着保持原始图片的宽高比，避免拉伸或压缩导致图像失真。不保存原图的策略则意味着只处理和返回缩略图，而不对原始图片进行任何修改。下面我们将详细探讨这个过程。 首先，我们需要理解基本的图像...
"上传图片(缩略图)"这个标题和描述提示我们，这里涉及的技术点主要是图片上传以及生成缩略图的过程。下面我们将详细探讨这两个核心知识点。 1. 图片上传： - **表单提交**：在HTML中，通常使用`...
### Java 上传图片生成缩略图的知识点解析 在现代Web开发中，处理图像是一项常见的需求，尤其是在涉及用户上传图片的应用场景中。本篇文章将基于提供的代码片段详细讲解如何使用Java来实现上传图片并自动生成缩略图...
综上所述，实现“原生js图片插件缩略图片控制大图淡入淡出切换支持图片轮播切换”需要掌握JavaScript核心语法、DOM操作、事件处理、CSS3动画和响应式设计等多个技能。通过这样的插件，可以为用户提供更丰富的视觉...
图片缩略图在IT行业中是图像处理和网页设计的关键元素，尤其在展示大量图片时，如照片库、电商网站或社交媒体平台。它们提供了一个高效且直观的方式，让用户快速浏览和预览图片内容，而无需加载完整大小的图像，从而...
- 缩略图通常是一组 `<img>` 元素，每个元素都有一个对应的大型图片URL。我们可以为每个缩略图添加一个类，例如 `thumbnail`，并设置`data-*`属性来存储大图的URL。例如： ```html ``` - 还需要一个用于...
它结合了JavaScript（js）和CSS（层叠样式表）技术，使得图片能够以吸引人的方式自动或手动进行切换，并且带有缩略图导航，用户可以方便地浏览全部图片。 【描述】提到的效果是网页设计中的一个经典元素，简洁大方...
"附带缩略图的JS图片轮换"是一个基于JavaScript实现的图片轮换解决方案，它不仅提供了主图片的轮换，还带有缩略图导航，让用户能够直观地看到所有可切换的图片，并手动选择查看。这种功能常用于网站的幻灯片展示、...
综上所述，js带缩略图的焦点图是一个结合了JavaScript、DOM操作、事件处理、图片适配和动画效果的复杂但实用的网页组件。它为用户提供了一种优雅的方式去展示和浏览多张图片，提升了网页的互动性和视觉吸引力。
在JavaScript（JS）中，创建一个按比例截取图片中间部分并保持图片不失真的缩略图功能是一项常见的需求。这通常应用于图片预览、相册展示等场景，以提高用户体验和节省网页加载资源。以下是对这个主题的详细阐述： ...
在本文中，我们将深入探讨如何基于Springmvc实现图片上传及生成缩略图的功能。Springmvc是Spring框架的一个重要模块，用于构建MVC模式的Web应用，它提供了强大的数据绑定、模型映射、视图渲染等功能，是Java开发中的...
在网页设计中，图片缩略图是不可或缺的一部分，它们用于预览大图，节省空间，提升用户体验。本教程将详细讲解如何使用CSS属性来创建HTML中的图片缩略图，不涉及图片内容本身。 首先，我们需要在HTML文件中插入图片...
5. **img**：这个目录可能包含缩略图和其他图像资源，这些图片会被用作动画的起点。 动画的实现流程大致如下： 1. 初始化Three.js场景，设置相机和渲染器。 2. 创建3D对象，比如一个立方体或者平面，作为缩略图的...
在本文中，我们将深入探讨如何使用jpeglib库在Linux环境下提取JPEG图片的缩略图，并进行网络传输。jpeglib库是JPEG（Joint Photographic Experts Group）标准的一个开源实现，它提供了一系列API，允许开发者对JPEG...
在处理图像应用时，我们可能需要在一个列表中显示图片的缩略图，这在设计用户界面时能够提供更好的视觉体验。本篇文章将深入探讨如何使用Qt的QListWidget来实现缩略图列表显示图片的功能。 首先，我们需要理解...
总之，"js实现上传图片即刻生成缩略图预览"是一个综合了前端JavaScript技术和后端处理的实用功能。它提升了用户体验，同时也需要开发者考虑到性能优化、安全性和适应性等问题。通过合理的技术组合，我们可以创建出既...
然而，通过一些技巧和扩展，我们也可以让`QListWidget`显示图片，甚至实现图片的缩略图显示。下面将详细解释如何在`QListWidget`中实现这个功能。 首先，我们要明白`QListWidget`的基本用法。它是一个基于模型/视图...