DIV 内容适合所有屏幕上的手机背景图像答案

【问题标题】：DIV content fit inside Mobile Phone Background Image on all screensDIV 内容适合所有屏幕上的手机背景图像
【发布时间】：2017-11-20 16:43:35
【问题描述】：

我正在设计具有手机图像（Android 或 IOS 手机）的单个页面。我希望这张图片在桌面和平板电脑的页面中居中。在手机上（手机图像），它应该适合整个屏幕。另外，我想在图像顶部放置一些 html 内容。无论屏幕大小，背景手机图像和内容都必须适合。

这就是我迄今为止所做的

<html>

<head> 
<style>
#con{
    background-image: url('example.png');
    background-size: contain;
    background-repeat: no-repeat;
    width: 100%;
    height: 0;
    padding-top: 66.64%;

}
</style>

</head>

<body>

<div style=" margin: 0 auto;">
  <div id="con"></div>
</div> 

</body>

</html>

【问题讨论】：

标签： javascript jquery html css

【解决方案1】：

你可以尝试使用@media进行适配

【讨论】：

【解决方案2】：

1 .你可以设置你的父元素样式 {display:table;margin:0 auto;}

2.你可以设置你的父元素样式{position:relative;}子元素样式{width:50%;
高度：50%；
溢出：自动；
边距：自动；
位置：绝对;
顶部：0；左：0；底部：0；正确：0;
}

【讨论】：

【解决方案3】：

使用 100vw 作为宽度和 100vh 作为高度，这将使#con 覆盖整个屏幕。移除 height 和 padding-top。

【讨论】：