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

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



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

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

操作方法：
打开 /themes/default/mobile/case/index.html  模板文件，查找如下代码：

1. <div class="xgtBeauty_box">
   
2.         <div class="xgtBeauty_show">
   
3.         <{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>
   
4.                 <{/if}>
   
5.                  <{/KT}>
   
6.                  <a class="xgtBeauty_item" href="<{link ctl='mobile/case:items'}>"> <img src="/themes/default/mobile/static/images/xgt2.png" alt=""> </a>
   
7.                  <{KT id="4" name="新模板手机案例聚合页户型之美" city_id=$request.city_id limit="2"}>
   
8.                 <{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>
   
9.                 <{/if}>
   
10.                  <{/KT}>
    
11.                  </div>
    
12.         <ul class="xgtBeauty_list">
    
13.                 <{foreach $attr_values as $v}>
    
14.                 <{if $v@index == 1}>
    
15.                 <li>
    
16.                         <p><{$v.title}></p>
    
17.                         <p>STYLE</p>
    
18.                 </li>
    
19.                 <ul>
    
20.                         <{foreach $v['values'] as $vv}>
    
21.                         <{if $vv@index<6}>
    
22.                         <li><a title="<{$vv.title}>" href="<{$vv.link}>"><{$vv.title}></a></li>
    
23.                         <{/if}>
    
24.                         <{/foreach}>
    
25.                 </ul>
    
26.                 <{/if}>
    
27.                 <{/foreach}>
    
28.         </ul>
    
29. </div>

复制代码

修改为：

1. <div class="xgtBeauty_box">
   
2.         <div class="xgtBeauty_show">
   
3.                 <{KT id="4" name="网站首页4F热门案例-风格" city_id=$request.city_id limit="2"}>
   
4.                 <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>
   
5.                  <{/KT}>
   
6.                 <a class="xgtBeauty_item" href="<{link ctl='mobile/case:items'}>"> <img src="%THEME%/mobile/static/images/xgt1.png" alt="更多"> </a>
   
7.                  </div>
   
8.         <ul class="xgtBeauty_list">
   
9.                 <{foreach $attr_values as $v}>
   
10.                 <{if $v@index == 0}>
    
11.                 <li>
    
12.                         <p><{$v.title}></p>
    
13.                         <p>TYPE</p>
    
14.                 </li>
    
15.                 <ul>
    
16.                         <{foreach $v['values'] as $vv}>
    
17.                         <{if $vv@index<6}>
    
18.                         <li><a title="<{$vv.title}>" href="<{$vv.link}>"><{$vv.title}></a></li>
    
19.                         <{/if}>
    
20.                         <{/foreach}>
    
21.                 </ul>
    
22.                 <{/if}>
    
23.                 <{/foreach}>
    
24.         </ul>
    
25. </div>

复制代码

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

1. .xgtBeauty_show:before {
   
2.         display: table;
   
3.         content: " ";
   
4.         box-sizing: inherit;
   
5. }
   
6. .xgtBeauty_show:after {
   
7.         display: table;
   
8.         content: " ";
   
9.         box-sizing: inherit;
   
10.         clear: both;
    
11. }
    
12. /************************************/
    
13. .xgtBeauty_show .xgtBeauty_item {
    
14.         width: 31vw;
    
15.         height: 31vw;
    
16.         float: left;
    
17.         display: block;
    
18.         position: relative;
    
19.         margin-left: 2vw;
    
20.         overflow: hidden;
    
21.         text-align:center;
    
22. }
    
23. .xgtBeauty_show .xgtBeauty_item:first-child {
    
24.         width: 63vw;
    
25.         height: 63vw;
    
26.         margin-left: 0;
    
27.         overflow: hidden;
    
28.         display: block;
    
29.     position: relative;
    
30. }
    
31. .xgtBeauty_show .xgtBeauty_item:first-child img {
    
32. 
    
33. }
    
34. .xgtBeauty_show .xgtBeauty_item:last-child {
    
35.         margin-top: 2vw;
    
36. }
    
37. .xgtBeauty_show .xgtBeauty_item img {
    
38.         width: 100%;
    
39.         height: 100%;
    
40.     object-fit: cover;
    
41. }
    
42. .xgtBeauty_show .xgtBeauty_item>p {
    
43.         position: absolute;
    
44.         bottom: 0;
    
45.         width: 100%;
    
46.         height: 0.25rem;
    
47.         color: #fff;
    
48.         line-height: 0.25rem;
    
49.         display: block;
    
50.     background: rgba(0, 0, 0, 0.6);
    
51. }
    
52. .xgtBeauty_list {
    
53.         background-color: #fff;
    
54.         padding: 0.2rem 0;
    
55.         box-shadow: 0.02rem 0.02rem 0.02rem #e9e9e9;
    
56.         overflow: hidden;
    
57. }
    
58. .xgtBeauty_list li {
    
59.         float: left;
    
60.         text-align: center;
    
61. }
    
62. .xgtBeauty_list>li {
    
63.         width: 20%;
    
64.         height: 0.4rem;
    
65.         line-height: 0.2rem;
    
66. }
    
67. .xgtBeauty_list>ul {
    
68.         width: 80%;
    
69.         float: right;
    
70.         border-left: 0.01rem solid #eaeaea;
    
71.         overflow: hidden;
    
72.         box-sizing: border-box;
    
73.         -moz-box-sizing: border-box;
    
74.         -webkit-box-sizing: border-box;
    
75. }
    
76. .xgtBeauty_list>ul>li {
    
77.         width: 33.33%;
    
78.         height: 0.2rem;
    
79.         line-height: 0.2rem;
    
80.         box-sizing: border-box;
    
81.     border-right: 1px solid #ececec;
    
82.     border-top: 1px solid #ececec;
    
83. }

复制代码

参考样式：

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

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

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

兼容性更好的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;
}