<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>图片居中显示</title>
<style>
.home_photo{ width:165px; height:230px;margin-right:17px;margin-left:10px; float:left; margin-top:20px; display:inline;}
.home_photo ul{ padding:0; margin:0;}
.home_photo_pic{ width:157px; height:157px; border:1px solid #ccc; background:#eaeaea;padding:3px;}
.home_photo_info{ text-align:center; margin-top:10px;}
</style>
<script>
var flag=false;
/**
* ImgD：原图
* maxWidth：允许的最大宽度
* maxHeight：允许的最大高度
*/
function drawImage(ImgD, maxWidth, maxHeight){
var image=new Image();
var iwidth = maxWidth; //定义允许图片宽度
var iheight = maxHeight; //定义允许图片高度
image.src=ImgD.src;
if(image.width>0 && image.height>0){
flag=true;
if(image.width/image.height>= iwidth/iheight){
if(image.width>iwidth){
ImgD.width=iwidth;
ImgD.height=(image.height*iwidth)/image.width;
}else{
ImgD.width=image.width;
ImgD.height=image.height;
}
ImgD.alt=image.width+"×"+image.height;
} else{
if(image.height>iheight){
ImgD.height=iheight;
ImgD.width=(image.width*iheight)/image.height;
}else{
ImgD.width=image.width;
ImgD.height=image.height;
}
ImgD.alt=image.width+"×"+image.height;
}
}
}
/**
* 让图片垂直居中。使用前提：当前图片必须被包含在div中
* ImgD：原图
* maxWidth：允许的最大宽度(即包含本图片的div的父节点对象的宽度，一般是li)
* maxHeight：允许的最大高度
*/
function centerImage(imgD, maxWidth, maxHeight){
var div = imgD.parentNode;//获取包含本图片的div
if(imgD.height < maxHeight){
var top = (maxHeight - imgD.height) / 2;
div.style.marginTop = top + "px";
}
if(imgD.width < maxWidth){
var left = (maxWidth - imgD.width) / 2;
div.style.marginLeft = left + "px";
}
}
</script>
</head>
<body>
<p>①用css控制 结合drawImage方法 按比例缩放图片<p>
<p>②用centerImage 结合drawImage方法 实现水平和垂直居中<p>
<p>
<b>说明：</b>
（1）图片必须套在div>ul>li>div中，其中li下面可以添加a节点；
（2）离图片最近的父节点必须是div，让图片水平和垂直居中显示，可全靠这个div了。
这里centerImage让图片居中显示的原理是：设置包含图片的div的style.marginTop和style.marginLeft属性，来间接安排图片的位置，
</p>
<p>作者：selina ,个人网址：http://if-dream.iteye.com/ ,邮箱：hesai.guang@qq.com<p>
<!-- html代码 按比例缩放图片-->
<div class="home_photo">
<ul>
<li class="home_photo_pic">
<div>
<img src="04.jpg" onLoad="drawImage(this, 157, 157);"/>
</div>
</li>
</ul>
</div>
<!-- html代码-->
<br/>
<br/>
<!-- html代码 按比例缩放图片且垂直居中-->
<div class="home_photo">
<ul>
<li class="home_photo_pic">
<div>
<img src="04.jpg" onLoad="drawImage(this, 157, 157);centerImage(this, 157, 157);"/>
</div>
</li>
</ul>
</div>
<!-- html代码-->
</body>
</html>
提供附件，可下载！
相关推荐
"jQuery图片等比例缩放图片左右垂直居中"这一技术就是为了应对这样的挑战。jQuery是一个广泛使用的JavaScript库，它提供了丰富的API和便捷的DOM操作方法，使得实现这个功能变得相对简单。 首先，我们要理解图片等...
总的来说，"jQuery图片等比例缩放图片左右垂直居中"涉及到前端开发中的响应式设计、图片布局、JavaScript事件处理和CSS定位等多个知识点。正确应用这些技术，可以提升网页的视觉效果和用户体验。
在网页设计中，图片的等比例缩放是一个常见的需求，特别是在响应式布局中，为了保持图像的原始比例，避免拉伸或压缩导致变形，我们通常会利用JavaScript来动态调整图片大小。本文将深入探讨如何使用JavaScript实现...
同时，我们还需要将图片垂直居中，我们可以使用 `padding-top` 属性来实现这一点。 在本文的示例代码中，我们使用了 JavaScript 来遍历所有的 `<img>` 元素，并将其缩放到等比的大小。同时，我们还使用了 CSS 来...
javascript图片自动缩放和垂直居中处理函数 javascript图片自动缩放和垂直居中处理函数是一种非常有用的应用代码，用于处理图片效果的自动缩放和垂直居中。下面是对该函数的详细解释和知识点总结： 1. HTML结构：...
这个技术的核心目标是实现图片的水平垂直居中，并在必要时进行智能裁切，以保持图片的正比例，防止变形。 首先，我们要理解"图片居中"这一概念。在CSS中，可以使用`margin: auto`结合`display: block`来使一个元素...
来实现图片的水平居中，而垂直居中则需要额外的CSS样式处理，例如使用flex布局或者使用相对定位配合负的margin来实现。 在实际应用中，还应该考虑图片的加载问题。由于图片的加载是一个异步过程，可能在图片还未...
`text-align:center` 和 `line-height:200px` 是用来使内容居中的，这里的`line-height`值与容器的高度相同，这是使图片垂直居中的关键。同时，`.imgBox img` 类设置了图片的最大宽度和最大高度（也是200px），以...
考虑到用户友好性，可以添加预览提示，如悬停时显示缩放图标，或者在图片放大后提供手势操作（如双指缩放）以增强用户体验。 综上所述，"鼠标点击图片、图片放大"这一功能涉及到前端开发的多个方面，包括事件处理...
“自动居中”则是让图片在容器中始终保持水平和垂直居中。可以使用CSS的`display: flex`和`justify-content: center; align-items: center;`属性，或者使用绝对定位配合`left: 50%; top: 50%; transform: translate...
通过CSS（层叠样式表）与JavaScript的结合使用，可以实现图片在固定区域内的智能显示：当图片尺寸超过容器时自动等比例缩放；当图片尺寸小于容器时，则使其居中显示。 #### CSS基础设置 首先，我们需要为图片定义...
在本文中，我们将深入探讨如何使用JavaScript实现固定显示区域内自动缩放图片的功能，这对于网页设计和用户体验优化至关重要。 首先，我们要明确目标：在固定大小的容器（例如一个`<div>`）内，使图片保持原始比例...
《嵩嵩图片管理系统》简称＂SsPic＂，采用ASP ACCESS DIV CSS JS开发,...5.图片实现自动缩放，自动垂直居中 6.图片自动按年月生成文件夹保存 7.图片自动生成缩略图 8.智能图片搜索功能，支持全站搜索，按分类搜索
黄金比例垂直居中；超大响应区域特别为ipad等触屏设备优化；预先缓存皮肤图片更快响应…… 跨平台兼容 兼容：IE6+、Firefox、Chrome、Safari、Opera以及iPad等移动设备。并且IE6下也能支持现代浏览器的静止定位...
5.图片实现自动缩放，自动垂直居中 6.图片自动按年月生成文件夹保存 7.图片自动生成缩略图 8.智能图片搜索功能，支持全站搜索，按分类搜索 需要安装ASPJPEG水印组件，下载使用的朋友们注意了，否则上传不了图片
例如，如果想要水平垂直居中排列图片，可以计算每张图片之间的间距。 5. **保存合成的图片**： 当所有图片都绘制完成后，可以使用`toDataURL()`方法将Canvas内容转换为数据URL，进一步可以下载或发送到服务器。 ...
6. **防止过度缩放**：为了避免图片被缩放得过大或过小，可以设定缩放比例的最小值和最大值，当达到极限时不再继续缩放。 通过以上步骤，我们就能够使用jQuery实现一个基本的图片放大缩小功能。然而，实际应用中...