html5 - Wie kann ich dafür sorgen, dass das Hintergrundbild auf dem Mobiltelefon im Vollbildmodus angezeigt wird (der Inhalt ist relativ lang und verfügt über Bildlaufleisten), um sicherzustellen, dass das Bild nicht deformiert wird?

Question

Meine mobile Webseite benötigt ein Hintergrundbild, ohne dass es verformt wird.
Bei meinen aktuellen Einstellungen ist der Hintergrund deformiert! Frag Gott!

Answer 1

background-size:100% auto;

Answer 2

你可以尝试不设置背景图，而是使用img标签来显示背景图片。

<p class="page">
    <img class="bg"/>
    <p class="page_Con">
    </p>
</p>

.page{position:relative;height: 100%;overflow:auto;}
.bg{width:100%;height:100%;}
.page_Con{position:absolute;top:0;left:0;width:100%;height:100%;}

Answer 3

background-size：cover；你要先在body和HTML 中设置width

Answer 4

既不拉伸图片又要完全展示，真是执着于这个的话，给设计提个参考方案吧：
把图片的轮廓羽化后，加个背景色，再去拿到图片背景色的色值，在main_bg中设置css属性：

background-color: white;// 拿到的图片背景色
background-image: url('链接');
background-size: 95%;  //可以写成固定值
background-repeat: no-repeat;
background-position: center;