天兴工作室:提供zblog模板 emlog模板 dedecms模板的下载和仿站定制 | RSS订阅 | 网站地图 | 联系我们
天兴工作室自用主题2015版上架销售
当前位置:网站首页 教程 正文

zblog用css定义缩略图大小不变形的方法

天兴工作室 3年前 (2013-05-16) 教程 7369 ℃ 2 评论
内容加载中......

zblog中的ytcms和minitu两个插件搭配起来可以做出很多效果,例如本站首页的这个两个效果,如下图:

zblog,css,缩略图


这里就涉及到了一个问题,怎么设置这个缩略图的大小还要保证图片不变形呢。

minitu插件的后台是可以设置图片大小的,这个当然可以解决问题,但是如果一个网站有几处使用了缩略图,并且缩略图的大小并不一样的时候,就要想别的办法了。

个人喜欢使用的是用css定义(当然还有其他的办法),分享下个人心得。

minitu调用出来的图片代码为

<a href="****" target="_blank" title="****"><img src="****" alt="****" /></a>

如果直接用css定义img的大小又会出现一种问题,博客内的配图有很多是随心所欲的,并不一定都是先用作图软件裁剪好了比例的,如果用css直接定义img的宽度和高度,图片就又会变形,我的思路是这样的:

用一个div把图片代码放在里面,用div标签用多了可能会乱套,所以个人习惯用<i></i>标签把图片代码装起来,定义一下<i>的css,代码是这样的:

<i id="tu"><a href="****" target="_blank" title="****"><img src="****" alt="****" /></a></i>

css这样定义:

1、定义<i>的高度和宽度,超出隐藏。

2、定义img的宽度和<i>的宽度一致,高度不定义,完整css代码是这样的:

#tu {
    display: block;
    height: 106px;
    width: 144px;
    overflow: hidden;
}
#tu img {
    width: 144px;
}

这样就不会让图片变形,看起来舒服些。如果有几处要这样调用的,修改下id的名称,然后修改不同id下<i>的宽度高度和img的宽度就ok了。

希望对大家有所帮助,如果你觉得这样定义不太好的话也欢迎指正额。

我要提问 如果你对于此文还有任何疑问欢迎在文章下面的评论区域留言,如果你的疑问比较多,欢迎在本站的在线提问专业去发布问题,点击右侧的我要提问即可到达。天兴工作室将尽我所能为你解答问题。

本文标签zblog css 缩略图

本文地址http://www.txcstx.cn/post/512.html

版权说明:如非注明,本站文章均为 天兴工作室 原创,转载请注明出处和附带本文链接。

哈哈,本文已有 2 位小伙伴发表了看法:

1#访客 (游客)  评论于 2014-07-06 04:23:23回应ta
#tu {
display: block;
height: 106px;
width: 144px;
overflow: hidden;
}
#tu img {
width: 144px;
}
请问这段代码放在哪里?
1#天兴 (游客)  评论于 2014-07-07 09:45:26回应ta
你正在使用主题的css文件里面

欢迎 发表评论

必填

选填

选填

必填

◎欢迎在这里交流反馈,垃圾评论会秒删的额...

联系我们
最新评论
标签云
宽带大提速文章自定义属性GPRS套餐愤怒的小鸟团购活动单身狗PUK码超级201emlog免费模板大牛辅助infinite-scroll恶意软件保健品zblog伪静态20元套餐卡zblog模板安装3G预付费定制zblogphp单篇文章问答模板电信3G三四线城市GPRS年包emlog判断页面php7360搜索代码黑色系列放假通知指定分类github删除成员验证码电信官网企业主题zblogseo
热门模板