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

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

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

css——手机端图片正确显示_第1张图片                      css——手机端图片正确显示_第2张图片

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

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

增加的样式代码:

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

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

css——手机端图片正确显示_第3张图片

你可能感兴趣的:(css——手机端图片正确显示)