L'image en plein écran sur la page Web est écrasée lorsque le périphérique est tourné uniquement de portrait au paysage.

StackOverflow https://stackoverflow.com//questions/25051407

Question

L'image affiche une amende (couvre tout l'arrière-plan) en portrait sur des périphériques, mais lorsqu'il est tourné vers le paysage, l'image est écrasée.Cela ne se produit que s'il est initialement chargé de portrait;Si le site est chargé dans l'orientation du paysage initialement, il affiche une amende lorsque vous faites pivoter entre le paysage et le portrait.Le reste de mon site n'est pas affecté.

Voici un violon de l'image: http://jsfiddle.net/pauljackson/66SQZ/

et mon site: http://wabi-sabi.cc

html: 

<body>
<div class="slide-wrapper">
    <div class="full-video-wrapper">
        <img src="http://www.wabi-sabi.cc/test/images/wabisabiwebvideo.jpg" id="bgimg" alt="Full Screen Image">
    </div>
</div>
</body>

CSS: 

body { margin: 0; padding: 0; height: 100%; width: 100%; }

.slide-wrapper {
display: block;
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}

.full-video-wrapper {
background: white;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
min-width: 100%;
min-height: 100%;
width: auto;
height: auto;
z-index: 1;
overflow: hidden;
}
#bgimg {
height:100%;
width:auto;
margin:0 auto;
overflow:hidden;
}

Était-ce utile?

La solution

Je vous suggère d'utiliser quelque chose comme ceci: 

tag { 
  background: url(images/bg.jpg) no-repeat center center fixed; 
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

Cela couvrira la zone mais ne sera pas (supposé) écraser votre image.Note aussi;La fonction de taille de fond IMHO est la meilleure façon d'y aller;Il y a beaucoup de paramètres différents que vous pourriez voir ici: w3schools

Licencié sous: CC-BY-SA avec attribution
Non affilié à StackOverflow
scroll top