江湖家居至尊版PC端首页装修案例样式修改
江湖家居至尊版官方演示站，首页装修案例样式显示有些不美观，所有图片都不是同比例缩放，特别是最后一张图片，宽度不变，但是高度被严重压缩，变形很严重，如图：为了保证最后一张图片看起来不被压缩，可以固定长度为478px，从图片中间向上下两端裁剪以保留图片的核心内容。实现方法为打开\themes\default\static\css\append.css样式表文件，查找如下代码：
ul.index_case_list li{ width:235px; margin:10px 0px 0px 8px;}
ul.index_case_list li img{ width:235px; height:176px;}
ul.index_case_list li.first{ width:470px; height:362px; overflow:hidden;}
ul.index_case_list li.first img{ min-width:470px; width:auto; height:362px;}
ul.index_case_list li:last-child{ width:478px; height:176px; overflow:hidden;}
ul.index_case_list li:last-child img{ min-width:478px; width:auto; height:176px;}
修改为：
ul.index_case_list li{ width:235px; margin:10px 0px 0px 8px;}
ul.index_case_list li img{ width:235px; height:176px;}
ul.index_case_list li.first{ width:470px; height:362px; overflow:hidden; text-align:center;}
ul.index_case_list li.first img{ min-width:470px; width:auto; height:362px;}
ul.index_case_list li:last-child{ width:478px; height:176px; overflow:hidden;}
ul.index_case_list li:last-child img{ min-width:478px; width: 100%; height: auto; transform: translateY(-45%); -webkit-transform: translateY(-45%);-ms-transform: translateY(-45%); -moz-transform: translateY(-45%);}
ul.index_case_list li:last-child p{position:absolute; top:146px;}
修改后效果如下:
相关文章：
CSS图片剪裁与原比例压缩或放大
http://www.admin365.cn/thread-41157-1-1.html
页:
[1]