解决DIY图片变形问题的简单方法

可能有不少TX在使用DIY模板时，都会遇到图片变形的问题，经过摸索，发现一个解决途径，提供给大家参考。

在DIY状态下，进入你要编辑的模块
【编辑】--》【属性】，进入[编辑属性]页

在此页下，进入【模块模板】

修改其中的CSS

给一个我的样本供你参考：

1. <div class="module cl slidebox">
   
2. <ul class="slideshow">
   
3. [loop]
   
4. <li style="max-width: {picwidth}px; max-height: {picheight}px; text-align:center"><a href="{url}"{target}><img src="{pic}" max-width="{picwidth}" max-height="{picheight}" height="{picheight}"/></a><span class="title">{title}</span></li>
   
5. [/loop]
   
6. </ul>
   
7. </div>
   
8. <script type="text/javascript">
   
9. runslideshow();
   
10. </script>
    

复制代码

其中主要是：
1：将原来的高宽，变成“最高”“最宽”
2：增加设置图片居中（text-align:center）
3：在<img src=***> 也只设置最高，最宽，关键要设一个高度为你的图片高度（不要设宽度）。或者只设宽度，不设高度也行（按指定宽度缩放），视具体情况而定。
这样显示时就会以指定高度、按比例缩放，并且居中显示了。

注意：只有那些支持max-width, max-height的浏览器才起作用，可能老的浏览器不支持。

以上是针对“图片幻灯片”类模板所做的修改，其他地方，涉及图片显示的，也可以此类推。

总之，对于DISCUZ 所体现出来的灵活性，还是需要赞美和感激的。

感谢有你

cr180 发表于 2012-2-5 13:48
感谢有你

看了很多您写的文章，很有帮助。

应该先感谢您。

不明白啊。不明白

测试下

真及时啊

能不能帮我看看问题在什么地方呢，我按照你描述的设置好了，但是还是不能正常显示呢？
div代码如下：
<div class="module cl ml">
<ul>
[loop]
<li style="max-width: {picwidth}px; max-height="{picheight}px; text-align:center；>
        <a href="{url}"{target}><img src="{pic}" max-width="{picwidth}" max-height="{picheight}" height="140"/></a>
        <p><a href="{url}" title="{title}"{target}>{title}</a></p>
<p>时间：{dateline}</p>
<p>推荐：{username}</p>
<p>查看：{viewnum} 评论：{commentnum}</p>
</li>
[/loop]
</ul>
</div>

门户地址：http://www.ybsyw.com/portal.php

请帮我看看吧，万分感谢！！

能不能帮我看看问题在什么地方呢，我按照你描述的设置好了，但是还是不能正常显示呢？ div代码如下： <div class="module cl ml"> <ul> [loop] <li style="max-width: {picwidth}px; max-height="{picheight}px; text-align:center；>         <a href="{url}"{target}><img src="{pic}" max-width="{picwidth}" max-height="{picheight}" height="140"/></a>         <p><a href="{url}" title="{title}"{target}>{title}</a></p> <p>时间：{dateline}</p> <p>推荐：{username}</p> <p>查看：{viewnum} 评论：{commentnum}</p> </li> [/loop] </ul> </div> 门户地址：http://www.ybsyw.com/portal.php 请帮我看看吧，万分感谢！！

ybhxb 发表于 2013-3-27 00:42
[/td][/tr]
[/table]

没有老师帮我看看啊，一直以来都为这个事情郁闷着，哎``

我的也是裁剪中间的部分，并且所有浏览器都不行，求解释