19楼_看花头精_图片排版_样式之（二）

设置缩略后。大图失真。请楼主解决。

原因分析。因设置成是148。而大图是306PX
所以本人修改了下代码但是不行。
请楼主帮忙看下。
<style>
        .jmcon_fg2{ padding:0px; *padding:0px 0px 10px 0px;_padding:0px; margin:0px; }
        .jmcon_fg2 li{ position:relative; float:left; overflow:hidden;width:148px;height:148px; margin-right:10px; margin-bottom:10px;}
        .jmcon_fg2 li img{ width:148px; height:148px;}
        .jmcon_fg2 .cr { margin-right:0px;}
        .jmcon_fg2 .rr{ margin-right:0px;}
        .jmcon_fg2 span{ position:absolute; left:0px; bottom:0px; width:148px;  text-align:center;  overflow:hidden; display:none;}
        .jmcon_fg2 a:hover span{ background-color:#000; opacity:0.7;filter:alpha(opacity=70); display:block;}
        .jmcon_fg2 a:hover{ color:#fff; text-decoration:none; font-size:14px;}

</style>
<ul class="jmcon_fg2 cl">
        <div class="l" style="width:306px; height:auto; float:left; margin-right:10px;">
                [index=1]
                        <li class="lt">
                                <a href="{url}" {target} title="{title}">
                                        <img alt="{title}" src="{pic}" width="{picwidth}" height="{picheight}">
                                        <span>{title}</span>
                                </a>
                        </li>
                [/index]
                [index=2]
                        <li class="lt" style="margin-right:0px;">
                                <a href="{url}" {target} title="{title}">
                                        <img alt="{title}" src="{pic}" width="{picwidth}" height="{picheight}">
                                        <span>{title}</span>
                                </a>
                        </li>
                [/index]
                [index=3]
                        <li style="margin-right:0px;  margin-bottom:10px;  width:306px; height:306px;">
                                <a href="{url}" {target} title="{title}">
                                        <img style="width:306px; height:306px;" alt="{title}" src="{pic}" width="306px" height="306px">
                                        <span style="width:306px;">{title}</span>
                                </a>
                        </li>
                [/index]
                [index=4]
                        <li class="lb">
                                <a href="{url}" {target} title="{title}">
                                        <img alt="{title}" src="{pic}" width="{picwidth}" height="{picheight}">
                                        <span>{title}</span>
                                </a>
                        </li>
                [/index]
                [index=5]
                        <li class="lb" style="margin-right:0px;">
                                <a href="{url}" {target} title="{title}">
                                        <img alt="{title}" src="{pic}" width="{picwidth}" height="{picheight}">
                                        <span>{title}</span>
                                </a>
                        </li>
                [/index]
        </div>
        <div class="c" style="width:306px; height:auto; float:left; margin-right:10px;">
                [index=6]
                        <li>
                                <a href="{url}" {target} title="{title}">
                                        <img alt="{title}" src="{pic}" width="{picwidth}" height="{picheight}">
                                        <span>{title}</span>
                                </a>
                        </li>
                [/index]
                [index=7]
                        <li class="cr">
                                <a href="{url}" {target} title="{title}">
                                        <img alt="{title}" src="{pic}" width="{picwidth}" height="{picheight}">
                                        <span>{title}</span>
                                </a>
                        </li>
                [/index]
                [index=8]
                        <li>
                                <a href="{url}" {target} title="{title}">
                                        <img alt="{title}" src="{pic}" width="{picwidth}" height="{picheight}">
                                        <span>{title}</span>
                                </a>
                        </li>
                [/index]
                [index=9]
                        <li class="cr">
                                <a href="{url}" {target} title="{title}">
                                        <img alt="{title}" src="{pic}" width="{picwidth}" height="{picheight}">
                                        <span>{title}</span>
                                </a>
                        </li>
                [/index]
                [index=10]
                        <li>
                                <a href="{url}" {target} title="{title}">
                                        <img alt="{title}" src="{pic}" width="{picwidth}" height="{picheight}">
                                        <span>{title}</span>
                                </a>
                        </li>
                [/index]
                [index=11]
                        <li class="cr">
                                <a href="{url}" {target} title="{title}">
                                        <img alt="{title}" src="{pic}" width="{picwidth}" height="{picheight}">
                                        <span>{title}</span>
                                </a>
                        </li>
                [/index]
                [index=12]
                        <li>
                                <a href="{url}" {target} title="{title}">
                                        <img alt="{title}" src="{pic}" width="{picwidth}" height="{picheight}">
                                        <span>{title}</span>
                                </a>
                        </li>
                [/index]
                [index=13]
                        <li class="cr">
                                <a href="{url}" {target} title="{title}">
                                        <img alt="{title}" src="{pic}" width="{picwidth}" height="{picheight}">
                                        <span>{title}</span>
                                </a>
                        </li>
                [/index]
        </div>
        <div class="r" style="width:306px; height:auto; float:left; margin-right:0px;">
                [index=14]
                        <li style="margin-right:0px;  margin-bottom:10px;  width:306px; height:306px;">
                                <a href="{url}" {target} title="{title}">
                                        <img style="width:306px; height:306px;" alt="{title}" src="{pic}" width="306px" height="306px">
                                        <span style="width:306px;">{title}</span>
                                </a>
                        </li>
                [/index]
                [index=15]
                        <li>
                                <a href="{url}" {target} title="{title}">
                                        <img alt="{title}" src="{pic}" width="{picwidth}" height="{picheight}">
                                        <span>{title}</span>
                                </a>
                        </li>
                [/index]
                [index=16]
                        <li class="rr">
                                <a href="{url}" {target} title="{title}">
                                        <img alt="{title}" src="{pic}" width="{picwidth}" height="{picheight}">
                                        <span>{title}</span>
                                </a>
                        </li>
                [/index]
                [index=17]
                        <li>
                                <a href="{url}" {target} title="{title}">
                                        <img alt="{title}" src="{pic}" width="{picwidth}" height="{picheight}">
                                        <span>{title}</span>
                                </a>
                        </li>
                [/index]
                [index=18]
                        <li class="rr">
                                <a href="{url}" {target} title="{title}">
                                        <img alt="{title}" src="{pic}" width="{picwidth}" height="{picheight}">
                                        <span>{title}</span>
                                </a>
                        </li>
                [/index]
        </div>
        <div style="clear:both;"></div>

</ul>

index3,和index14是调用大图的306PX，所以直接指定长与宽。分别是306PX。
而其它的图全是一样的。148PX。所以就调用图片缩略变量。  <img alt="{title}" src="{pic}" width="{picwidth}" height="{picheight}">但这样做以后。大图以然变形。

定远热线 发表于 2012-11-29 14:20
index3,和index14是调用大图的306PX，所以直接指定长与宽。分别是306PX。
而其它的图全是一样的。148PX。所 ...

解决楼主的问题，请查看
19楼_看花头精_图片排版_样式之（一）
https://discuz.dismall.com/thread-3148679-2-1.html

18楼 有说明的。

lynn.sh 发表于 2012-11-29 18:48
解决楼主的问题，请查看
19楼_看花头精_图片排版_样式之（一）
https://discuz.dismall.com/thread-3148679- ...

谢谢。但这个方法不太好。

我想到一个可以解决的办法。用标签调用。
设几个模块。像楼主的样式1，可以用二个模块来解决。
而样式2，可以通过7个模块来解决。
DZ自身的不足，如果前台DIY调用缩略，在一个模块里，就不能实现不同的图片缩略。

NB啊，尽然可以扩展这么多，我以为只可以扩展9条呢

第十条以后就显示不出来了，直接LOOP了，求助（属性里面显示条数设置的18）

suiningdog 发表于 2012-11-23 08:11
在头尾加上div标签就可以了，x2，谢谢楼主

能具体点吗？我也是X2，用这个代码有点问题，求指教

还不错支持一下吧