css - h5页面里的头像大小问题？

Question

作为一个新手，我对于h5页面上的头像大小问题很头疼，设计师给我的psd，我如何尽可能高保真的还原，类似头像大小是固定高宽好还是按照页面宽度的比例来设置，求解惑这样的图片应该怎么布局好！

Answer 1

按照一定的比例，但不一定非得是父元素的百分比，也可以 rem 什么的。
然后设置一下 max-height、min-height 什么的可能会比较好一点。

Answer 2

Bootstrap中有个img-responsive样式，可以根据父元素大小自动匹配大小

Answer 3

前端工程师有一项重要的任务，那就是尽量百分百的还原设计图。做到要尽量的还原设计图需要做到两点:
1、百分百虽然不太可能，但是也要尽力的做到相近。
2、在多设备下表现尽量一致。

如果在手机上采用固定宽高方案即 px 方案，可以做相应的媒体查询变化改变元素的宽高，这样随着手机屏幕的变大，元素显示的也会相应的变大，这样就可以在多设备下表现尽量的一致。

如果采用手机的设备像素比布局方案即 rem 布局方案，元素的度量单位都是采用 rem, 元素的大小会根据 html 元素设置的基准值来改变大小。也可以在多设备下表现尽量的一致。

个人是建议使用 rem 方案来布局会比较方便，如果采用 px 的布局方案，在使用媒体查询的时候需要提前的计算好元素在某一特定宽度下的宽高。而使用 rem 方案只需要以某一个特定的宽度为基准就可以了，如：iPhone6的布局宽度为750，那就按照这个的宽度基准来设计就可以了。

更多资料 移动端高清、多屏适配方案