HTML:
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<img src="https://www.giulietta-del-conte.com/img/GdC-Logo.jpg" alt="image" class="ri">
<img src="https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcTgIgacR7lL5NvgHyajZEeWlam9pUfmTMe749qDew4Lw11MDwmi" alt="banner" class="r2">
</body>
</html>
CSS:对我以前发布的内容进行了改进。
div {
position: absolute;
top: 50%;
left: 50%;
max-width: 80%;
max-height:80%;
transform: translate(-50%, -50%);
}
img.ri {
display: block;
max-width: 100%;
}
img.r2 {
display: block;
width: 100%;
height: 40px;
}
媒体查询定向。
@media screen and (orientation: portrait) {
div, img.ri, img.r2 { max-width: 90%; }
}
@media screen and (orientation: landscape) {
div, img.ri, img.r2 { max-height: 100%; }
}
但是在水平拉伸浏览器时仍然无法正常工作。图像出现在滚动条中。
最佳答案
评论后有更新
据我了解您的问题,我认为您需要这样的东西:
HTML:
<div class="wrap">
<div class="inner">
<img src="https://www.giulietta-del-conte.com/img/GdC-Logo.jpg" alt="image" class="ri">
<img src="https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcTgIgacR7lL5NvgHyajZEeWlam9pUfmTMe749qDew4Lw11MDwmi" alt="banner" class="r2">
</div>
</div>
CSS:
.wrap {
width: 100vw;
height: 100vh;
display: block;
position: relative;
}
.inner {
position: absolute;
max-width:100%;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}
.ri, .r2 {
width: 100%;
height: auto;
padding: 0;
margin: 0;
display: block;
}
这是一个codepen:http://codepen.io/NeilWkz/pen/qNwGLv
注意:此解决方案使用视口单位调整.wrap的大小,请检查您的浏览器支持要求http://caniuse.com/#feat=viewport-units。如果需要支持更多浏览器,则需要使用javascript解决方案来确定.wrap div的大小,例如:
JS:
var w = window,
d = document,
e = d.documentElement,
g = d.getElementsByTagName('body')[0],
y = w.innerHeight || e.clientHeight || g.clientHeight;
$('.wrap').css({
'height': y + 'px'
});