织梦列表页缩略图大小控制的方法-巨人网络

主页 > 网站建设 > 建站知识 > 织梦列表页缩略图大小控制的方法

织梦列表页缩略图大小控制的方法

POST TIME:2017-11-13 00:33

工业环保工程类企业网站织梦模板(带手机端)

软件APP类网站源码织梦通用型企业网站源码html

蓝色安防器材公司类整站模板

html5响应式网站织梦模板源码IT网络工作室织梦网

　　织梦DedeCMS的缩略图功能还是比较强大的，不过织梦DedeCMS默认的缩略图是把图片缩放到指定的大小比例，这样就会造成缩略图被拉伸等而失真，关于织梦DedeCMS缩略图失真的解决办法，织梦DedeCms5.7缩略图变形解决方法一文，原理是把织梦DedeCMS的缩略图处理方式改为截取。

　　不过我们在使用织梦DedeCMS制作网站的时候，还需要考虑到缩略图大小问题，很多地方使用织梦DedeCMS缩略图是大小不一致的，比如列表页的缩略图和首页幻灯的缩略图等。怎么控制织梦DedeCMS缩略图的大小呢?

　　下面以织梦DedeCMS列表页面的缩略图为例说明，以下为织梦DedeCMS默认列表页面缩略图部分的代码：

		
								{dede:list pagesize='10'} 

								<!--调用的条数10条-->

								<li> 

								[field:array runphp='yes']@me = (empty(@me['litpic']) ? "" : "<a <a href="mailto:href='{@me['arcurl']}'">href='{@me['arcurl']}'</a> class='preview'><img <a href="mailto:src='{@me['litpic']}'/></a">src='{@me['litpic']}'/></a</a>>"); 

								[/field:array] 

								<!--这里控制的是缩略图-->

								<!--如果要控制图片的高度需要修改： <img <a href="mailto:src='{@me['litpic']}'">src='{@me['litpic']}'</a> 这里现在的是宽度：

								img <a href="mailto:src='{@me['litpic']}'">src='{@me['litpic']}'</a> iwidth='300' height='370' 这里控制了宽度的大小，以及高度

								-->

								[<b>[field:typelink/]</b>] 

								<!--这里控制的是栏目-->

								<a href="[field:arcurl/]" class="title">[field:title/] 

								<!--这里控制的是标题，标题链接-->

								<span class="info"> 

								<!--这里控制的是描述-->

								<small>日期：</small>[field:pubdate function="GetDateTimeMK(@me)"/] <small>点击：</small>[field:click/] <small>好评：</small>[field:scores/] </span>

								<p class="intro"> [field:description/]... </p> 

								<!--描述-->

								</li>

								{/dede:list}

　　如果要控制上述代码中图片的大小，有以下的两种方法可供参考，一种是在CSS样式中控制，规定图片的高度、宽度等信息，默认模板可以使用下面的css代码控制：

						.pbox dl dt{

						width:188px;

						height:132px;

						display:block;

						overflow:hidden;

						}

						.pbox dl dt a img{

						display:block;

						width:expression(this.width > this.height && this.width >176 ? 176 : true);

						height:expression(this.height > this.width && this.height > 132? 132 : true);

						max-width:176px;

						max-height:132px;

						margin:0px auto 0px;

						}