首页经常会在做网站设计时放几张产品的缩略图，可以用CSS样式表进行控制，采用超出部分隐藏的方法实现缩略图效果，有时候会产生图片缺一块的情况。在这里谈一谈如何用js按比例做出缩略图。
function ReImgSize(){
var await=document.getElementById("Imgbox");//定义要改变的图片的容器ID
var imgall=await.getElementsByTagName("img");//取得容器内所有的IMG标签
for (i=0;i<imgall.length;i++)
{
if (imgall[i].width>500) //如果图片的宽度大于500
{
var oWidth=imgall[i].width; //取得图片的实际宽度
var oHeight=imgall[i].height; //取得图片的实际高度
imgall[i].width="500"; //重设图片的宽度为500
imgall[i].height=oHeight*500/oWidth; //重设图片的高度
}
}
}
将以上JS代码放到Head区，然后在Body标签中加入onload=”ReImgSize”进行调用。除了可以使用此方法，还有更简单的，那就是用Jquery进行制作，将省去很多代码，更加的简单方便。
简介： CSS按比例缩小图片(缩略图)，FF和IE7用 max-width max-height，IE6用expression。 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional ...
CSS按比例缩小图片(缩略图)，FF和IE7用 max-width max-height，IE6用expression。
<!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=gb2312" />
<title>无标题文档</title>
<script type="text/javascript">
function ResumeError() { return true; }
window.onerror = ResumeError; //屏蔽JS错误，这样状态栏就不会显示“网站上有错误了”
</script>
<style type="text/css" >
.album-pic-list img {
vertical-align: middle;
max-width:100px; /* FF IE7 */
max-height:100px; /* FF IE7 */
_width:expression(this.width > 100 && this.width > this.height ? 100: auto); /* IE6 */
_height:expression(this.height > 100 ? 100 : auto); /* IE6 */
}
</style>
</head>
<body>
<div class="album-pic-list">
<img src="pic/pic_03.jpg" />
<img src="pic/lo2.jpg" />
</div>
</body>
</html>
分享到：
相关推荐
本文将详细讲解如何使用Unity的API来实现截屏、制作缩略图，并将结果保存到本地文件，同时提供JavaScript（js）和C#两种语言的实现方案。 一、Unity截屏 Unity提供了内置的`ScreenCapture.CaptureScreenshot`方法...
这个“制作缩略图源码,生成带水印的缩略图”的项目显然关注的就是这一核心功能。接下来，我们将详细讨论如何实现这个功能，以及涉及的关键技术。 首先，缩略图的生成通常是通过图像处理库来完成的。在不同的编程...
这个工具包“Delphi编写的批量制作缩略图的工具”显然利用了Delphi的强大功能来创建一个应用程序，该程序能够自动化处理图像，生成缩略图。这在处理大量图片，如照片库、产品目录或者网站设计时非常有用，可以极大地...
在C#编程中，制作缩略图是一项常见的任务，尤其在处理图像库或者网页应用时。这个名为"MakeThumbnail"的项目就是专为此目的而设计的。下面将详细讲解如何利用C#语言来创建缩略图，以及在这个项目中可能涉及的关键...
vb制作缩略图, 调取GDI+模块.....................
NULL 博文链接：https://wenkaixuan.iteye.com/blog/785823
从给定的代码片段来看，这段代码主要涉及的是在ASP.NET环境下处理文件上传与缩略图生成的过程。我们可以从中提炼出以下关键知识点： ### 1. 文件上传与处理 在`Btn_sctp_Click`事件处理器中，首先检查是否有文件被...
"js实现上传图片即刻生成缩略图预览"这个功能就是为了让用户体验更加流畅，允许他们在上传图片的同时立即查看预览效果，而无需等待完整的图片加载。这在处理大尺寸或者高分辨率图片时尤其有用，因为生成的缩略图可以...
在Python中制作缩略图是一项常见的任务，尤其在处理图像数据时。OpenCV和PIL（Python Imaging Library）是两个非常流行的库，用于处理图像，包括创建缩略图。下面我们将详细探讨如何使用这两个库来实现这个功能。 ...
这项功能为用户提供了便捷的缩略图生成方式，减少了手动制作缩略图的步骤，特别适合希望快速简便地为文章添加缩略图的用户。然而，使用内置图片仓库也会带来一些问题，比如可能会导致服务器流量增加，因为每次上传...
易语言源码易语言GDI缩略图源码.rar 易语言源码易语言GDI缩略图源码.rar 易语言源码易语言GDI缩略图源码.rar 易语言源码易语言GDI缩略图源码.rar 易语言源码易语言GDI缩略图源码.rar 易语言源码易语言GDI缩略图...
通过调整这些值，我们可以制作出不同风格的缩略图效果。 接下来，我们讨论如何将缩略图包装在链接中。通过将`<a>`标签包裹在`<img>`标签外，我们可以让缩略图成为一个可以点击的链接。为了增强用户体验，我们还使用...
在网页设计中，图片缩略图是一种非常常见的元素，它能有效地展示一组图片，节省空间，提高用户体验。本文将深入探讨如何使用CSS技术来创建XHTML网页上的图片缩略图，我们将不涉及具体的图片内容，而是关注样式和布局...
此外，还有一个“thumb”类用于制作缩略图，包含了如“thumb_on”控制是否生成缩略图，“thumb_type”为生成缩略图的方式，“thumb_width”和“thumb_height”为生成缩略图的尺寸，“thumb_fix”为缩略图的后缀名等...
本话题将深入探讨如何使用MVC架构来实现两个关键功能：制作缩略图以及上传大视频。 首先，让我们从缩略图的制作开始。在Web应用中，缩略图通常用于展示图片的预览，节省带宽，并提高用户体验。在MVC框架中，这个...
Video Thumbnails Maker(视频缩略图制作软件)是一款可以帮助你快速的制作视频文件的缩略图的免费软件，Video Thumbnails ...当然你也可以在选项那里进行设置，有很丰富的选项可以让你自由的控制所制作缩略图的样式！
在许多应用和网站中，为了展示大量图片，缩略图被广泛采用，而当用户对某张图片感兴趣时，可以点击缩略图来查看大图。 实现“缩略图点击展开大图”的功能，通常涉及以下几个步骤： 1. **前端布局**：在HTML结构中...
Video Thumbnails Maker是一款可以帮助你快速的制作视频文件的缩略图的免费软件 功能：...当然你也可以在选项那里进行设置，有很丰富的选项可以让你自由的控 制所制作缩略图的样式 该软件需要在 .Net 环镜下才能运行，
批量制作图片缩略图的工具。当您制作相册目录或将相片发布到网页时，为加快浏览速度，会将图片生成缩略图。这个工具可以一次将目录下的相片按规则全部生成缩略图。 主要功能： （1）支持5种缩略图制作方式：按...