2015-07-21 8 views
0

Je suis en train de construire this landing page En mode paysage mobile, l'image de fond est découpée directement au point de défilement.css image de fond se coupe en mode paysage mobile

comment puis-je le réparer afin que je puisse voir l'image entière tout en faisant défiler la page? tnx

+0

votre site ne répond pas si la résolution que vous parlez? s'il vous plaît fournir la résolution de résolution où vous voulez votre solution –

+0

pour cette résolution: max-width: 1080px – DavSev

+0

si vous aviez une propriété responsive largeur que vous pourriez utiliser 'background-size: contain' pour éviter de couper – maioman

Répondre

0

Vous pouvez utiliser l'attribut srcset qui cible une résolution différente. Si vous souhaitez cibler votre application sur tous les types de périphériques (grands ou petits), il est déconseillé d'utiliser la même image pour toutes les résolutions.

<picture> 
    <source srcset="img/extralarge.jpg, img/extralarge.jpg 2x" media="(min-width: 1000px)"> 
    <source srcset="img/large.jpg, img/large.jpg 2x" media="(min-width: 800px)"> 
    <source srcset="img/medium.jpg"> 
    <img srcset="img/medium.jpg" alt="Sample Test"> 
</picture> 

Dans le code ci-dessus, j'ai utilisé 3 types d'images différents ciblant différentes résolutions.

En outre, vous pouvez utiliser des images sensibles Vérifiez l'URL http://alistapart.com/article/responsive-images-in-practice