根据图像的大小,什么是一个很酷的CSS3方法,以确保图像占据窗口高度dict
和min-width:50%
?
因此,如果图像质量好并且大于屏幕/视口的分辨率,它将表现为max-width:100%;
,如果不是,它将占据屏幕空间的至少50%。
感谢。
PS - 如果CSS3不能做,JS方法很酷但是否则可以作为后备首选
background-size:cover;
html,
body {
min-height: 100% !important;
background-color: #efefef;
color: #5c5c5c;
overflow-y: hidden;
}
html {
font-size: 10px;
}
body {
/*background: #fff;*/
margin: 0;
height: 100%;
}
#layout {
height: 100%;
max-height: 100%;
min-width: 100%;
position: absolute;
display: flex;
flex-flow: row nowrap;
justify-content: left;
align-items: center;
}
#cover {
background: #EFEFEF;
flex: 0 0 30rem;
max-height: 100%;
width: auto;
min-width: 100%;
max-width: 100%;
height:100%
}
.hold-img{width: inherit;height: inherit;padding: 0;margin: 0;}