css——手机端图片正确显示

这两天遇到的问题汇总(一):

1.图片在app端显示有差异:如下

                      

左边图片是:图片显示太大,以至于让整个页面都失真的效果;右边是调好样式之后的效果,知道增加了一个什么属性不?

...
 <div class="starter-template">
        <h1>{{data.title}}</h1>
        <span class="auth">作者:{{data.author}} &nbsp;&nbsp;&nbsp;{{data.retime}}</span>
        {{#data.content}}
    </div>
...

增加的样式代码:

 .starter-template img {
            max-width: 100%;
            max-height: 100%;
            objec-fit: none;
        }

而神奇的地方就在于object-fit属性,

posted @ 2016-12-01 14:09  郑叶叶  阅读(1410)  评论(0编辑  收藏  举报