关于html布局的问题，图片中含有文字

Question

简单用ppt做了一张图，顶部是一张底图，图片中有用户头像，p标签列表。这边我选取了两种方案
一种是div给一个background的熟悉，放入图片，但是要指定相应的高度
另外一种是在div里面做了两个div一个是放img标签，并且给img absolute属性
不过两种方案在稍微有差别的手机设备上都会出现不同的效果或者错位什么的。
请问有没有什么更好的办法？

Answer 1

.headtop {

position: relative;
width: 100%;
max-width: 600px;
margin: 0 auto;
background: url(../top2.png) ;
height: 100%;
width: 100%;
background-size: 100%;
background-position: bottom;
background-repeat: no-repeat;

}
最后选用这种方案，并且图片居底，然后设计图的时候稍微高一点点，这样无论什么分辨率下，图都是比较正常的

Answer 2

如果你想背景占满屏，又不变形，有以下2种方法：

1：如果你用图片做背景图background,需要增加以下代码:

width:100%;
hieght:100%;
background-size: cover;

2:如果你用图片做img图片，再absolute和z-index:

width:100%;
hieght:100%;
object-fit: cover;

注意，图片元素一定是占满整屏。100%生效

Answer 3

width:100%;
hieght:100%;
background-size:100% 100%;

强制填充 经多个项目检验有效

Answer 4

兼容性要求低 就object-fit

要求高就padding-top百分比撑开空间 里面定位图片 宽高100%放图片 前提需要知道宽高比