0
我正在建立一个网站，主页上的图片是256X480突破身体，并推动身体远离html元素，我有点困惑如何处理这个图像和它的容器似乎不响应max-height属性。有人可以解释为什么这是或指向我的一些资源，解释这一点，以及如何解决它，谢谢。我有一个图像，推动身体远离html元素，如果窗口高度缩小
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;
}
}
我把图像在你的代码，我不看不到任何东西推体远用
min-height: 100vhHTML元素https://jsfiddle.net/9oy5n0he/4/ –是的我猜这不适合用较小的图片，我拥有的是256x480，它将身体推离html – alexis
更小的图片？检查我使用的图像，它是2000x1333 http://cdn.thedailybeast.com/content/dailybeast/articles/2015/03/31/neil-degrasse-tyson-defends-scientology-and-the-bush-administration-s-科学记录/ jcr：content/image.img.2000.jpg/1432067001553.cached.jpg –