Question

我正在设计一个有手机图像（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>

Answer 1

您可以尝试使用@media进行改编

Answer 2

1。您可以设置父元素样式{display：table; margin：0 auto;}

2.您可以设置父元素样式{position：relative;}子元素样式{width：50％;
        身高：50％;
        溢出：auto;
        保证金：auto;
        位置：绝对;
        顶部：0;左：0;底部：0;右：0;
     }

Answer 3

使用100vw宽度和宽度100vh的高度，这将使#con覆盖整个屏幕。去除高度＆amp;填充顶

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

3 个答案: