<!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=GB2321" />
<meta id="robots" content="all" />
<meta name="Description" content="图片垂直居中 图片等比例缩放的方法" />
<meta name="Keywords" content="图片垂直居中" />
<meta id="author" content="土人老徐 http://K.css6.com" />
<meta id="Copyright" content="Copyright 2010-2011 K.css6.com. All Rights Reserved" />
<!--<link href="http://style.china.alibaba.com/css/fdevlib/reset/reset.css" type="text/css" media="screen" rel="stylesheet" />-->
<title>分享图片垂直居中，图片等比例缩放的方法 </title>
<style type="text/css" media="screen" rel="stylesheet">
.img_list ul li{
float:left;
margin:10px;
//width:202px;
height:202px;
overflow:hidden;
display:inline;
}
.img_list ul li {
vertical-align:middle;
float:left;
width:200px;
height:200px;
overflow:hidden;
display:table-cell; *display:block;
line-height:200px;
font-size:200px; *font-size:175px;
text-align:center;
border:1px solid #f00;
font-family:Arial;
}
.img_list ul li img {
max-width:200px;
width:expression(this.width > 200 ? "200px" : this.width);
max-height:200px;
height:expression(this.height > 200 ? "200px" : this.height);
}
</style>
</head>
<body>
<div class="img_list">
<ul id="img_list">
<li>
<span>
<img src="2.jpg" alt="示例图片" />
</span>
</li>
<li align="absmiddle">
<span>
<img src="1.jpg" alt="示例图片" />
</span>
</li>
</ul>
</div>
<script type="text/javascript">
</script>
</body>
</html>
分享到：
相关推荐
本压缩包文件"jquery图片插件设置图片等比例缩放.rar"主要涉及到jQuery插件的使用，用于实现图片在不同设备和屏幕尺寸上等比例缩放的效果，这在响应式网页设计中尤为重要。 首先，我们需要理解jQuery是什么。jQuery...
或者，我们可以只设置`max-width`来限制图片的最大宽度，高度则会自动按比例缩放。 ```html <img src="01.jpg"> ``` 当浏览器加载此图片时，如果图片的高度超过300像素，它将被自动缩放到不超过300像素的...
在网页设计中，为了提供良好的用户体验，特别是在移动设备上，页面按比例缩放是一个重要的功能。JavaScript 是一种强大的客户端脚本语言，常用于实现这样的动态效果。"页面按比例缩放JS.rar" 提供的正是一个利用 ...
- 当图片是背景图时，可以使用CSS3的`background-size: cover`属性来实现等比例缩放。 通过以上方法，你可以使用jQuery轻松实现图片的等比例缩放，无论是在不同分辨率的设备上还是在窗口大小变化时，都能保持良好的...
在实际的网页开发中，可以结合CSS和JavaScript来实现图片的等比例缩放。例如，可以设置图片的CSS样式为`max-width: 100%`和`height: auto`，这样图片会在不超出容器宽度的情况下等比例缩放。然后，当窗口尺寸变化时...
总结来说，"js图片缩放效果制作鼠标滚动图片等比例缩放代码"是一个利用JavaScript实现的网页动态效果，通过监听滚动事件、计算缩放比例和应用CSS3动画，使得图片在鼠标滚动时能够平滑、等比例地缩放，提升了网页的...
《图片等比例缩放技术详解及优化实践》 在网页设计中，图片的展示效果往往直接影响用户体验。尤其是当图片尺寸不一，或者需要在不同设备上展示时，等比例缩放成为一种必不可少的技术手段。本文将深入探讨如何实现...
在JavaScript编程领域中，"js鼠标滚动图片等比例缩放代码.zip" 提供了一种实现动态图片缩放的解决方案，特别是在网页设计中用于创建图片相册的特效。这个压缩包可能包含一个或多个文件，如JavaScript源代码文件、...
在HTML中，我们可以使用CSS来实现图片的等比例缩放： 1. **CSS宽度和高度设置**： 通过设置图片的宽度（width）和高度（height）为百分比，可以实现图片的自适应缩放。例如，`width: 100%; height: auto;`会使得...
在前端开发领域，图片的等比例缩放与居中显示是一项常见的需求，尤其在构建响应式网站或处理不同尺寸图片的展示时。"jQuery图片等比例缩放图片左右垂直居中"这一技术就是为了应对这样的挑战。jQuery是一个广泛使用的...
为了保持图片的原始比例，避免拉伸或压缩导致失真，开发者通常会使用等比例缩放的方法。本篇将详细介绍如何使用JavaScript实现图片的等比例缩放，并通过一个完整的示例来解析其工作原理。 首先，我们需要理解等比例...
例如，`transform: scale(x)`可以用来缩放元素，其中`x`是一个介于0和1之间的值，表示相对于原尺寸的缩放比例。如果希望在鼠标悬停时实现图片放大效果，可以使用`:hover`伪类结合`transition`属性来平滑过渡。 除了...
transform位移与缩放”专注于CSS的一个重要特性——`transform`属性，它允许我们对元素进行二维空间的变换，包括位移、缩放、旋转和倾斜等。下面将详细探讨`transform`中的位移和缩放功能。 一、`transform`属性...
当滚轮事件触发时，我们需要获取当前图片的大小，计算出缩放比例，然后更新图片的CSS `transform`属性，确保图片等比例缩放。缩放比例可以通过比较滚动前后的页面偏移量（`pageYOffset`）来计算，通常会有一个阈值以...
5. 可以根据需要添加更多的图层、交互和控件，例如WMS服务、GeoJSON数据、比例尺、图层切换器等。 在开发过程中，OpenLayers提供了丰富的文档和示例代码，帮助开发者了解和掌握其各项功能。通过深入学习和实践，你...
综上所述，"拖动、缩放.zip"可能包含了一个使用HTML5 Canvas和JavaScript实现的H5图片拖动和缩放示例，其中涉及到了事件监听、坐标转换、CSS3变换、边界检测和动画效果等多个技术点。在实际开发中，这样的功能可以...
首先，我们要明白，常规情况下，CSS中的`font-size`属性用于设置文本的大小，而字体本身的宽度和高度比例（宽高比）是固定的，这使得文字在放大时会按比例缩放，不会出现明显的拉伸效果。但如果我们想要实现纵向拉伸...
总之，实现"js按比例缩放图片且垂直居中显示图片"涉及到HTML结构、CSS样式和JavaScript编程，通过合理地组合这些技术，我们可以创建出适应性强、用户体验优秀的图片展示效果。在实际项目中，可以根据需求和环境选择...
在JavaScript中，图片等比例缩放是一项常见的任务，特别是在网页开发和图像处理中。这个压缩包文件中的代码可能提供了一种方法，使用户能够上传图片并自动将其等比例缩放到预设的尺寸，同时尽可能减少失真。接下来，...