0
Je construis un site Web et l'image 256X480 sur la page d'accueil se détache du corps et pousse le corps loin de la élément html, je suis un peu confus sur la façon de gérer cela l'image et son conteneur ne semblent pas répondre du tout à la propriété max-height. Est-ce que quelqu'un peut expliquer pourquoi cela est ou me montrer des ressources qui expliquent cela et comment y remédier, merci.J'ai une image qui éloigne le corps de l'élément html si la hauteur des fenêtres se rétrécit
https://jsfiddle.net/9oy5n0he/
html{
height: 100%;
}
body{
margin: 0px;
background-image: linear-gradient(0, rgba(0,0,0,.8) 30%, rgba(0,150,255,.8) 100%), url("images/mainCover.jpg");
background-repeat: no-repeat;
background-size: cover;
height: 100%;
}
img{
max-width: 100%;
}
/*nav and header*/
header{
background-color: rgba(255,165,0,.8);
display: flex;
flex-flow: row wrap;
justify-content: center;
border-bottom: 8px solid black;
}
nav ul {
list-style: none;
padding: 0;
}
header h1{
text-align: center;
margin: 0;
padding: 15px;
text-shadow: 5px 5px 5px rgba(0,0,0,.3);
}
header h1, nav a{
font-weight: 700;
font-family: arial;
}
header nav{
display: none;
}
.main-nav{
margin: 4px;
}
nav ul li{
text-align: center;
margin: 0 4px;
border: 1px solid white;
border-radius: 15px;
font-size: 1.2rem;
}
a{
text-decoration: none;
}
nav a:visited, nav a,h1{
color: white;
}
.current-page{
background-color: rgba(0,0,0,.5);
}
footer nav{
position: fixed;
width: 100%;
bottom: 0px;
}
footer nav ul{
margin: 0;
}
footer nav li{
background-color: rgba(255,165,0,.8);
}
/*home page*/
.bookWrapper{
width: 25%;
margin: auto;
}
.bookLink {
display: block;
margin: auto;
}
.bookImage{
margin: auto;
display: block;
}
.amazonBookLabel{
background-color: rgba(0,0,0,.5);
color: white;
padding: 10px;
font-size: 1.5em;
font-weight: 600;
width: 50%;
border-radius: 20px;
margin: 30px auto;
text-align: center;
position: relative;
}
.amazonBookLabel:after{
content: "";
width: 30px;
height: 5px;
background-color: rgba(0,0,0,.5);
position: absolute;
bottom: -5px;
left: calc(50% - 17px);
}
.amazonBookLabel:before{
content: "";
width: 0;
height: 0;
border-left: 40px solid rgba(0,0,0,.5);
border-top: 40px solid transparent;
position: absolute;
bottom: -45px;
transform: rotate(-45deg);
transform-origin: top left;
left: calc(50% - 30px);
}
/***responsive***/
@media screen and (min-width: 400px){
header{
height: 130px;
display: flex;
justify-content: center;
}
header h1{
font-size: 2em;
align-self: flex-start;
white-space: nowrap;
border: 8px solid black;
}
header nav{
display: block;
align-self: flex-end;
}
.main-nav{
display: flex;
justify-content: flex-end;
}
.main-nav li{
border-radius: 8px;
padding: 5px;
font-size: 1.3rem;
}
.characters:hover {
position: relative;
border-radius: 8px 8px 0 0;
}
.drop-menu{
position: absolute;
visibility: hidden;
display: block;
top: 33px;
white-space: nowrap;
left: -2px;
background-color: rgba(255,165,0,.8);
border: 1px solid rgba(0,0,0,.02);
box-shadow: 5px 5px 5px 2px rgba(0,0,0,.3);
opacity: 0;
transition: opacity 300ms ease-in-out 0s;
z-index: 1;
}
.characters:hover .drop-menu{
visibility: visible;
opacity:1;
}
.drop-menu li{
margin: 0;
border-radius: 0;
}
footer nav{
display: none;
}
}
@media screen and (min-width:860px){
header{
height: 120px;
justify-content: space-between;
}
header h1{
margin: 0 0 0 20px;
}
.main-nav li{
font-size: 1.5rem;
}
header nav{
margin: 0 40px 0 0;
}
}
@media screen and (min-width: 1109px){
header h1{
font-size: 3em;
margin: 0 0 0 80px;
}
.main-nav > li{
margin: 0 8px;
}
header nav{
margin: 0 80px 0 0;
}
}
Je mets des images dans votre code et je ne vois corps rien pousser loin de l'élément html https://jsfiddle.net/9oy5n0he/4/ –
ouais je suppose qu'il ne le fait pas avec de plus petites images, celle que j'ai est 256x480 et son repoussant le corps loin du html – alexis
petites images? Vérifiez l'image que j'ai utilisée, c'est 2000x1333 http://cdn.thedailybeast.com/content/dailybeast/articles/2015/03/31/neil-degrasse-tyson-defends-scientology-and-the-bush-administration-s- science-record/jcr: content/image.img.2000.jpg/1432067001553.cached.jpg –