江湖家居至尊版手机版装修案例首页让图片自适应div大小

灰儿发表于 2017-8-2 11:00:10

江湖家居至尊版官方演示站手机版装修案例首页，显示效果不美观，对其代码进行修改，让图片保持原有尺寸比例，并且自适应父元素 div 尺寸大小，图片多出部分不可见。美化后对比如下：

美化原理：
主要是使用 CSS3的 object-fit:cover属性，MDN上给的解释，object-fit这个属性指定可替换元素在已被设定好的宽高中展示的方式。

[*]cover: 中文释义“覆盖”。保持原有尺寸比例。保证替换内容尺寸一定大于容器尺寸，宽度和高度至少有一个和容器一致。因此，此参数可能会让替换内容（如图片）部分区域不可见。

操作方法：
打开 /themes/default/mobile/case/index.html模板文件，查找如下代码：
<div class="xgtBeauty_box">
   <div class="xgtBeauty_show">
   <{KT name="新模板手机案例聚合页户型之美" city_id=$request.city_id limit="2"}><{if $index==0}><a class="xgtBeauty_item" href="<{link ctl='mobile/case:detail' arg0=$item.case_id}>"><img src="<{$pager.img}>/<{$item.thumb}>" /><p><span><{$item.title}></span></p></a>
            <{/if}>
            <{/KT}>
            <a class="xgtBeauty_item" href="<{link ctl='mobile/case:items'}>"> <img src="/themes/default/mobile/static/images/xgt2.png" alt=""> </a>
            <{KT id="4" name="新模板手机案例聚合页户型之美" city_id=$request.city_id limit="2"}>
            <{if $index==1}><a class="xgtBeauty_item" href="<{link ctl='mobile/case:detail' arg0=$item.case_id}>"><img src="<{$pager.img}>/<{$item.thumb}>" /><p><span><{$item.title}></span></p></a>
            <{/if}>
            <{/KT}>
            </div>
   <ul class="xgtBeauty_list">
            <{foreach $attr_values as $v}>
            <{if $v@index == 1}>
            <li>
                     <p><{$v.title}></p>
                     <p>STYLE</p>
            </li>
            <ul>
                     <{foreach $v['values'] as $vv}>
                     <{if $vv@index<6}>
                     <li><a title="<{$vv.title}>" href="<{$vv.link}>"><{$vv.title}></a></li>
                     <{/if}>
                     <{/foreach}>
            </ul>
            <{/if}>
            <{/foreach}>
   </ul>
</div>
修改为：<div class="xgtBeauty_box">
   <div class="xgtBeauty_show">
            <{KT id="4" name="网站首页4F热门案例-风格" city_id=$request.city_id limit="2"}>
            <a class="xgtBeauty_item" href="<{link ctl='mobile/case:detail' arg0=$item.case_id}>"><img src="<{$pager.img}>/<{$item.thumb}>" /><p><span><{$item.title}></span></p></a>
            <{/KT}>
            <a class="xgtBeauty_item" href="<{link ctl='mobile/case:items'}>"> <img src="%THEME%/mobile/static/images/xgt1.png" alt="更多"> </a>
            </div>
   <ul class="xgtBeauty_list">
            <{foreach $attr_values as $v}>
            <{if $v@index == 0}>
            <li>
                     <p><{$v.title}></p>
                     <p>TYPE</p>
            </li>
            <ul>
                     <{foreach $v['values'] as $vv}>
                     <{if $vv@index<6}>
                     <li><a title="<{$vv.title}>" href="<{$vv.link}>"><{$vv.title}></a></li>
                     <{/if}>
                     <{/foreach}>
            </ul>
            <{/if}>
            <{/foreach}>
   </ul>
</div>

再修改对应的 style.css 样式表文件，修改后代码如下：

.xgtBeauty_show:before {
   display: table;
   content: " ";
   box-sizing: inherit;
}
.xgtBeauty_show:after {
   display: table;
   content: " ";
   box-sizing: inherit;
   clear: both;
}
/************************************/
.xgtBeauty_show .xgtBeauty_item {
   width: 31vw;
   height: 31vw;
   float: left;
   display: block;
   position: relative;
   margin-left: 2vw;
   overflow: hidden;
   text-align:center;
}
.xgtBeauty_show .xgtBeauty_item:first-child {
   width: 63vw;
   height: 63vw;
   margin-left: 0;
   overflow: hidden;
   display: block;
position: relative;
}
.xgtBeauty_show .xgtBeauty_item:first-child img {

}
.xgtBeauty_show .xgtBeauty_item:last-child {
   margin-top: 2vw;
}
.xgtBeauty_show .xgtBeauty_item img {
   width: 100%;
   height: 100%;
object-fit: cover;
}
.xgtBeauty_show .xgtBeauty_item>p {
   position: absolute;
   bottom: 0;
   width: 100%;
   height: 0.25rem;
   color: #fff;
   line-height: 0.25rem;
   display: block;
background: rgba(0, 0, 0, 0.6);
}
.xgtBeauty_list {
   background-color: #fff;
   padding: 0.2rem 0;
   box-shadow: 0.02rem 0.02rem 0.02rem #e9e9e9;
   overflow: hidden;
}
.xgtBeauty_list li {
   float: left;
   text-align: center;
}
.xgtBeauty_list>li {
   width: 20%;
   height: 0.4rem;
   line-height: 0.2rem;
}
.xgtBeauty_list>ul {
   width: 80%;
   float: right;
   border-left: 0.01rem solid #eaeaea;
   overflow: hidden;
   box-sizing: border-box;
   -moz-box-sizing: border-box;
   -webkit-box-sizing: border-box;
}
.xgtBeauty_list>ul>li {
   width: 33.33%;
   height: 0.2rem;
   line-height: 0.2rem;
   box-sizing: border-box;
border-right: 1px solid #ececec;
border-top: 1px solid #ececec;
}

参考样式：

http://wap.17house.com/xiaoguotu/

http://m.fuwo.com/xgt/

He199501 发表于 2017-8-3 16:56:56

大哥为何找回密码哪里不起作用

灰儿发表于 2017-10-8 08:25:39

兼容性更好的css 样式。

.xgtBeauty_show .xgtBeauty_item {
width: 32%;
height: 32vw;
float: right;
display: block;
position: relative;
overflow: hidden;
text-align:center;
}
.xgtBeauty_show .xgtBeauty_item:first-child {
width: 66%;
height: 66vw;
float: left;
margin-left: 0;
overflow: hidden;
display: block;
position: relative;
}
.xgtBeauty_show .xgtBeauty_item:last-child {
margin-top: 2vw;
}
.xgtBeauty_show .xgtBeauty_item img {
width: 100%;
height: 100%;
object-fit: cover;
}
.xgtBeauty_show .xgtBeauty_item>p {
position: absolute;
bottom: 0;
width: 100%;
height: 0.25rem;
color: #fff;
line-height: 0.25rem;
display: block;
background: rgba(0, 0, 0, 0.6);
}
.xgtBeauty_list {
background-color: #fff;
padding: 0.1rem 0 0 0;
overflow: hidden;
}
.xgtBeauty_list li {
float: left;
text-align: center;
}
.xgtBeauty_list>li {
width: 20%;
height: 0.4rem;
line-height: 0.2rem;
}
.xgtBeauty_list>ul {
width: 80%;
float: right;
border-left: 1px solid #ececec;
border-bottom: 1px solid #ececec;
overflow: hidden;
box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
}
.xgtBeauty_list>ul>li {
width: 33.33%;
height: 0.2rem;
line-height: 0.2rem;
box-sizing: border-box;
border-right: 1px solid #ececec;
border-top: 1px solid #ececec;
}

页: [1]

管理员之家 - 网站管理员、站长技术与运营交流平台！'s Archiver

江湖家居至尊版手机版装修案例首页让图片自适应div大小