<img/>在src加載失敗或沒有給的，瀏覽器會自動給img加上邊框。
如下圖這樣：
產品覺得影響美觀，一定要pass掉。
原碼是這樣：
.ctn{ position: relative; width: 2.8rem; height: 2.8rem; border-radius: 3px; overflow: hidden; background: #FFF; } .ctn .title{ position: absolute; top: 0; width: 2.8rem; height: 2.8rem; background:rgba(0,0,0,.35) ; color: #FFF; font-size: .52rem; font-weight: bold; padding:0 .4rem; } .ctn img{ width: 2.6rem; height: 2.2rem; margin: .3rem auto; object-fit: cover; background: url(images/120X120.jpg?201608012) no-repeat center; background-size: 2.2rem; }<div class="ctn"> <div class="title sn-flex center"> <p>休閑西裝</p> </div> <img src=""/> </div>百度一下，在知乎上找到了解決方案，鏈接在這https://www.zhihu.com/question/27426689
基於能用css實現就不用js的原則，選擇了以下的解決方案：
給img包個div
<div class="ctn"> <div class="title sn-flex center"><p>收腰款</p></div> <div class="img-ctn"> <img src="temp/app_200x200.jpg"/> </div> </div>.ctn .img-ctn{ width: 2.6rem; height: 2.2rem; margin: .3rem auto; overflow: hidden; } .ctn .img-ctn img{ width: -webkit-calc(2.6rem + 2px); height: -webkit-calc(2.2rem + 2px); width: calc(2.6rem + 2px); height: calc(2.2rem + 2px); background: url(images/120X120.jpg?201608012) no-repeat center; background-size: 1.8rem; margin: -1px; object-fit: cover; }but，有問題，無圖片時上下的border是隱藏了，左右無論怎么樣都隱藏不了，暫時沒查出來問題，於是改成了這樣：
.ctn .img-ctn{ width: 2.6rem; height: 2.2rem; margin: .3rem auto; overflow: hidden; background: url(images/120X120.jpg?201608012) no-repeat center; background-size: 1.8rem; } .ctn .img-ctn img{ width: inherit; height: inherit; object-fit: cover; } /*無src隱藏*/ .ctn .img-ctn img[src='']{ visibility: hidden; }后來，在控制台調試時，忽然靈光乍現，FUCK，是reset樣式的問題。
原來，base.css
對img做了這個
img { max-width: 100%; }hehe，重新又改成這樣：
.ctn .img-ctn{ width: 2.6rem; height: 2.2rem; margin: .3rem auto; overflow: hidden; } .ctn .img-ctn img{ width: -webkit-calc(2.6rem + 2px); height: -webkit-calc(2.2rem + 2px); width: calc(2.6rem + 2px); height: calc(2.2rem + 2px); background: url(images/120X120.jpg?201608012) no-repeat center; background-size: 1.8rem; margin: -1px; /*就是這貨*/ max-width: none; object-fit: cover; }ok，提交給開發，終於可以偷懶一會了。
however，改變來的太快。開發發來了一張圖：
去開發機上調試一下，瞬間感受到了深深的惡意。
原來圖片的背景圖層是透明的，盒子模型的渲染層級是color>src>background-image>background-color，圖片空白區域透明自然就顯示背景圖片了。
img{ background: red url(images/120X120.jpg?201608012) no-repeat center; }<img src=".png">
感覺自己的洪荒之力已經用完了。。。。
at the end，為了規避這種圖片出現，直接不給背景圖片了，直接通過模板引擎來判斷吧
<img src="{$src||'images/120X120.png'}"