<!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>
<!--[if lte IE 6]>
<script type="text/javascript" language="javascript">
function imgFix() {
//定义要限制的图片宽高,这个宽高要同style里面定义的相同，小于限定高宽的图片不操作
var widthRestriction = 200;
var heightRestriction = 200;
var allElements = document.getElementsByTagName('*')
for (var i = 0; i < allElements.length; i++)
{
if (allElements[i].className.indexOf('imgBox') >= 0)
{
var imgElements = allElements[i].getElementsByTagName('img');
for (var j=0; j < imgElements.length; j++)
{
if ( imgElements[j].width > widthRestriction || imgElements[j].height > heightRestriction )
{
if ( imgElements[j].width > imgElements[j].height)
{
imgElements[j].height = imgElements[j].height*(widthRestriction/imgElements[j].width);
imgElements[j].width = widthRestriction;
} else
{
imgElements[j].width = imgElements[j].width*(heightRestriction/imgElements[j].height);
imgElements[j].height = heightRestriction;
}
}
if ( imgElements[j].height < heightRestriction )
{
imgElements[j].style.paddingTop = ( heightRestriction -imgElements[j].height ) /2 + "px";
}
} /*for j*/
}
}/*for i*/
}
window.onload = imgFix;
</script>
<![endif]-->
<style type="text/css">
<!--
* {
margin:0;
padding:0;
}
.imgBox li {
list-style:none;
width:200px; /* 宽度 */
height:200px; /* 高度 */
background:#ccc;
border:1px solid #666;
text-align:center;
margin:5px;
line-height:200px;
}
.imgBox img {
max-width:200px; /* 宽度 */
max-height:200px; /* 高度 */
vertical-align:middle;
}
-->
</style>
</head>
<body>
<ul class="imgBox">
<li><img src="......" alt="img" /></li>
<li><img src="......" alt="img" /></li>
<li><img src="......" alt="img" /></li>
<li><img src="......" alt="img" /></li>
</ul>
</body>
</html>
相关推荐
JS+CSS 实现图片等比缩小并垂直居中 在网页开发中，图片的缩放和垂直居中是非常常见的需求，而本文将介绍使用 JS+CSS 来实现图片等比缩小并垂直居中的代码。 首先，在 HTML 中，我们需要定义一个容器元素 `...
总之，实现"js按比例缩放图片且垂直居中显示图片"涉及到HTML结构、CSS样式和JavaScript编程，通过合理地组合这些技术，我们可以创建出适应性强、用户体验优秀的图片展示效果。在实际项目中，可以根据需求和环境选择...
该示例介绍的是如何使用JavaScript和CSS来实现图片的等比缩小并垂直居中的方法。在Web开发中，保持图片的原始比例缩放并确保它们在容器内居中对齐是一项常见的需求，尤其是在响应式设计中。下面我们将详细讨论这个...
4. 居中显示：为了使图片在容器内水平和垂直居中，可以设置图片的`margin`属性为`auto`，并确保容器具有相对定位。 以下是一个简单的JavaScript代码示例，实现图片的等比例缩放和居中： ```javascript // 获取图片...
综上所述，要实现浏览器窗口放大缩小后页面内容居中，需要结合CSS布局技术，如Flexbox或Grid，以及JavaScript和jQuery的事件监听和动态计算。同时，响应式设计和性能优化也是不可忽视的环节。实际操作时，根据项目...
以下是如何使用Flexbox实现水平和垂直居中： ```css .container { display: flex; justify-content: center; /* 水平居中 */ align-items: center; /* 垂直居中 */ height: 100vh; /* 设置为视口高度，确保内容...
4. **应用样式变换**：完成比例计算后，我们需要更新图片的CSS样式来实现放大或缩小的效果。主要涉及到`transform`属性中的`scale`函数，例如`scale(x, y)`，其中x和y是水平和垂直方向的缩放因子。 以下是一个简单...
垂直居中则可以通过多种方式实现，如使用 `line-height` 属性、弹性盒子模型（Flexbox）或表格布局等技术。 3. 多行省略号：在显示长文本内容时，有时需要限制显示的行数，并在末尾添加省略号表示内容被截断。通过 ...
黄金比例垂直居中；超大响应区域特别为ipad等触屏设备优化；预先缓存皮肤图片更快响应…… 跨平台兼容 兼容：IE6+、Firefox、Chrome、Safari、Opera以及iPad等移动设备。并且IE6下也能支持现代浏览器的静止定位...
本教程将详细介绍如何使用CSS3来实现一个具有底部阴影的按钮，并提供相关的代码下载。 首先，我们来理解CSS3阴影效果的基础。CSS3提供了`box-shadow`属性，用于为元素添加阴影。这个属性接受几个参数，例如： ```...
- **循环播放**：实现广告图片的自动切换，可以使用 JavaScript 来定时改变当前显示的图片索引，配合 CSS 动画平滑过渡。 - **导航点**：为用户提供当前显示图片的指示，通常是一组小圆点，选中的圆点对应当前显示...
- `flex-shrink`: 定义项目在主轴上的缩小比例，当空间不足时按比例缩小。 - `flex-basis`: 设置项目在分配额外空间前的基础大小，默认值为`auto`，可以是长度值。 - `align-self`: 允许单个Flex项目覆盖容器的`...
- `flex-shrink`：项目缩小比例，当空间不足时，按比例缩小项目。 - `flex-basis`：项目的基础大小，在分配空间前的初始大小。 - `align-self`：允许单个项目有与其他项目不同的对齐方式，覆盖了容器的`align-...
具体实现方式是在CSS中对父容器（div）设置display属性为flex，并使用justify-content和align-items属性来分别实现水平和垂直居中。 其次，CSS中的动画功能允许我们定义元素从一个样式渐变到另一个样式的过程。通过...
这时，我们保持图片宽度不变，根据容器高度重新计算图片高度，使得图片可以完全填充容器的宽度，同时使用CSS的margin-top来保证图片垂直居中。 以上就是JQuery实现图片缩略的主要原理和步骤。通过这种方式，我们...
- `flex-shrink`: 控制flex项在空间不足时的缩小比例。 - `flex-basis`: 定义在分配多余空间前，flex项的基本大小。 - `flex`: 简写属性，用于设置`flex-grow`, `flex-shrink` 和 `flex-basis`。 5. **对齐方式*...
/* 文本垂直居中 */ } ``` 弹性布局的其他关键属性包括`flex-grow`（控制元素的放大比例），`flex-shrink`（控制元素的缩小比例）和`flex-wrap`（是否允许换行）。例如： ```css li { flex-grow: 1; /* 所有子...
它可以轻松地实现水平居中、垂直居中，以及在不同屏幕尺寸下自动调整元素大小。使用Flexbox，开发者可以创建出响应式的网格系统，适应不同设备的屏幕宽度。 以下是一些Flexbox的关键属性： 1. `display: flex;`：将...
在Flex布局中，通过设置元素的margin为auto，可以实现自动分配空间的功能，比如水平居中或垂直居中。 6. 顺序 默认情况下，Flex项目会按照它们在HTML中的顺序进行显示。但通过flex-order属性，我们可以改变这个...
在JavaScript（JS）中实现图片缩放特效是一项常见的任务，特别是在网页设计中，为了提升用户体验，经常需要通过交互式操作来展示图片。本篇将详细解释如何利用JS和CSS实现一个简单的图片滚轮放大效果。 首先，我们...