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'
    });

09-10 06:13
查看更多