Autumn Pro在手机图片缩微不太正常

特色模式缩微图砍头处理

如果在PC上选择特色模式显示,那么在手上显示图片就可能出现砍头的现象。图片的头部和底部都被切断,就剩下中间的一点。

要么就讲缩微图的尺寸设计的比较合理,要么就调整代码。我这里提供一个调整代码的方法。

假设图片都是顶部是完整的内容,我们让上部分多显示一下,底下的不显示,但是也不太影响整体的效果了。

一张原图镇楼,
WechatIMG1316

特色图片列表图片砍头处理

让图片置顶显示,一般的上半截都比较正常

    /*控制 特色图片列表 显示效果,增加让图片置顶显示,避免被砍头*/
    .global_feature_list{
        background-repeat: no-repeat;
        background-position: top!important;
    }

添加到自定义CSS,不知道怎么添加的看前面链接的文章。

图文列表缩微图砍头处理

同理让图片置顶显示,一般的上半截都比较正常

因为列表中的图片使用了css3的特性,cover: 保持原有尺寸比例。宽度和高度中长的那条边跟容器大小一致,短的那条等比缩放。可能会有部分区域不可见。
这里给图片增加一个属性,让其定位在顶部,就能正常的显示了。这样修改了注意,图像的主要内容尽量要在头部

/*控制 图文列表 显示效果,增加让图片置顶显示,避免被砍头*/
.entry-media img{
    object-position: top;
}

修改图片变成合适的尺寸

可以修改图片到比较合适的尺寸,不过也挺难的,因为这个尺寸变化太多了。很难做到比较合适。如果希望知道全面的尺寸,可以看我前面的文章。

图1:PC下的特色图片,很完整的显示了

图2:手机端的特色图片,头部没有了,脚脚也没有了。

图3:修改代码后的手机端特色图片
可以看到头部能够正常的显示,小姐姐也出来了。

大吉猫

记录自己使用过的软件,学习过的资料,还有可能对大家有用的东西

相关推荐

加强WordPress会员安全

安装WPJAM插件及扩展插件会员管理,进入后台-用户,用户设置 功能都很实用,也提高了安全性, 屏蔽了用户后台的 …

暂无评论

微信扫一扫,分享到朋友圈

Autumn Pro在手机图片缩微不太正常