缩略图自适应宽和高

最新推荐文章于 2023-07-29 15:15:00 发布

SmartJavaer

最新推荐文章于 2023-07-29 15:15:00 发布

阅读量1.3k

点赞数

分类专栏： Ajax CSS 文章标签： javascript image function class border xhtml

Ajax 同时被 2 个专栏收录

55 篇文章 0 订阅

订阅专栏

CSS

10 篇文章 0 订阅

订阅专栏

控制缩略图常见的是JS来控制，还有就是最直接的方法定义img的宽高；
下面两种方法自适应宽和高，推荐使用CSS方法；
原文地址： http://www.liaozhenxin.com/blog/article.asp?id=155
一、CSS方法；
主要是在CSS设置最小值和最大值(max-width: 100px; max-height: 100px; width: expression(this.width >100 && this.height < this.width ? 100: true); height: expression(this.height > 100 ? 100: true);)

<!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">
<style type="text/css">
a img{border:0;}
.imgthumblist { margin: 0 3px; padding: 0; list-style: none; }
/*/*/ * html .imgthumblist { height: 1%; }/**/ *>.imgthumblist { overflow: hidden; }
.imgthumblist li { float: left; display: inline; text-align: center; background: #F0F9FF; width: 108px; height: 163px; w/idth: 100px; he/ight: 155px; overflow: hidden; border: 1px solid #B9D0ED; padding: 3px; margin: 3px; }
.imgthumblist li.list1line { height: 123px; he/ight: 115px; }
.imgthumblist li.list2line { height: 143px; he/ight: 135px; }
.contentL .imgthumblist li { margin: 0 1px 3px; }
.imgthumblist p { margin: 0; line-height: 18px; font-size:12px}
.imgthumblist div { line-height: 90px; font-size: 90px; height: 100px; display: table; }
.imgthumblist div a { display: table-cell !important; display: block; width: 100px; vertical-align: middle; }
.imgthumblist div img { vertical-align: middle; max-width: 100px; max-height: 100px; width: expression(this.width >100 && this.height < this.width ? 100: true); height: expression(this.height > 100 ? 100: true); font-size: 10px; }
@media all and (min-width: 0px){ .imgthumblist div img { width: 100px; height: 100px; } } /*for Opera Only*/
</style>
<div><ul class="imgthumblist">
<li class="list2line">
<div><a href="http://www.liaozhenxin.com/blog/article.asp?id=155" title="图片名称"><img src="http://www.liaozhenxin.com/blog/attachments/month_0612/3200612221928.jpg" alt="图片名称"/></a></div>
<p><a href="http://www.liaozhenxin.com/blog/article.asp?id=155">图片名称</a></p>
<p class="smalltxt">图片数:1</p>
</li>
<li class="list2line">
<div><a href="http://www.liaozhenxin.com/blog/article.asp?id=155" title="图片名称"><img src="http://www.liaozhenxin.com/blog/attachments/month_0612/p20061222185348.jpg" alt="图片名称" /></a></div>
<p><a href="http://www.liaozhenxin.com/blog/article.asp?id=155">图片名称</a></p>
<p class="smalltxt">图片数:3</p>
</li>
<li class="list2line">
<div><a href="http://www.liaozhenxin.com/blog/article.asp?id=155" title="图片名称"><img src="http://www.liaozhenxin.com/blog/attachments/month_0612/v2006122219452.jpg" alt="特别的爱给特" /></a></div>
<p><a href="http://www.liaozhenxin.com/blog/article.asp?id=155">图片名称</a></p>
<p class="smalltxt">图片数:4</p>
</li>
</ul>
</div>

提示：您可以先修改部分代码再运行

二、JS方法
我就不说了代码写的很清楚。

提示：您可以先修改部分代码再运行

[ 本帖最后由 mddg 于 2007-1-26 21:16 编辑 ]

附件: 缩略图.rar

SmartJavaer

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
缩略图自适应宽和高

控制缩略图常见的是JS来控制，还有就是最直接的方法定义img的宽高；下面两种方法自适应宽和高，推荐使用CSS方法；原文地址：http://www.liaozhenxin.com/blog/article.asp?id=155一、CSS方法；主要是在CSS设置最小值和最大值(max-width: 100px; max-height: 100px; width: expression(this.wid
复制链接

扫一扫

专栏目录