html5 - Comment faire en sorte que l'image de fond s'affiche en plein écran sur le téléphone mobile (le contenu est relativement long et comporte des barres de défilement), en s'assurant que l'image ne soit pas déformée ?

Question

Ma page Web mobile a besoin d’une image d’arrière-plan. Comment puis-je afficher l’image d’arrière-plan en plein écran sans déformation ? Avec ma configuration actuelle, le fond est déformé ! Demander à Dieu!

高洛峰 · Answer

taille de l'arrière-plan : 100 % automatique ;

过去多啦不再A梦 · Answer

Vous pouvez essayer de ne pas définir d'image d'arrière-plan, mais d'utiliser la balise img pour afficher l'image d'arrière-plan.


    
    

    


.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

background-size : cover ; vous devez d'abord définir la largeur du corps et du HTML

给我你的怀抱 · Answer

Vous souhaitez afficher entièrement l'image sans l'étirer. Si cela vous obsède vraiment, veuillez fournir un plan de référence pour le design :
Après avoir adouci le contour de l'image, ajoutez une couleur d'arrière-plan, puis obtenez la valeur de couleur de la couleur d'arrière-plan de l'image. Définissez les attributs CSS dans main_bg :

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