Question

我在我的HTML页面中插入了一个在我的笔记本电脑上看起来很棒的图像（因为它填满了整个屏幕），但是当我将它连接到我的42英寸电视屏幕时，它并没有填满整个屏幕但只有一个电视屏幕的一小部分。如何插入图像以使其适应每种屏幕尺寸或宽高比？

期待您的回复。

在我的CSS文件下面找到

<html>
  <head>
    <title></title>
    <style type="text/css">
    #slideshow-container { height:190px; position:relative; }
    #slideshow-container img { position:absolute; left:0; top:0; width:100%; height:100% }
    #slideshow      { position:absolute; left:0; top:0; width:100%; height:100%; list-style:none }
    #slideshow img  { width:120px; height:90px; background-repeat:none; background-position:top left; position:absolute; left:0; top:0 }
    #slideshow      { position:absolute; left:0; top:0; width:100%; height:100%; }
    #slideshow img  { width:1350px; height:660px; background-repeat:none; background-position:top left; position:absolute; left:0; top:0 } 
/* adjust this for your images */
    </style>
  </head>
  <body>

    <div id="slideshow-container">
      <div id="slideshow"> 
          <img src="images/Ads/images1.jpg"> 
          <img src="images/Ads/images2.jpg">
          <img src="images/Ads/images.jpg">
          <img src="images/Ads/images1.jpg">
          <img src="images/Ads/images2.jpg">
      </div> 
    </div>
  </body>
</html>

Answer 1

因为您正在寻找一种css解决方案，所以这是可行的方法：

img {
  height: 100vh;
}

它使用基于视口高度vh的单位。请务必删除inline元素导致的边距，填充和空格。

注意：旧版浏览器不支持vh。见http://caniuse.com/#search=vh

视口宽度也有相应的vw。

要支持vh不可用的浏览器，您可以使用javascript计算高度和宽度并相应地更新样式。您可以在页面加载时进行设置，然后使用附加到窗口大小调整的事件更新它。

Answer 2

您可以将其设置为背景图像并将其缩放为完整尺寸

html, body {
    height: 100%;
}
body {
    margin: 0;
    background-image: url(http://lorempixel.com/200/200);
    background-size: 100% 100%;
    background-repeat: no-repeat;
}

JSFiddle

使用img元素可以实现同样的效果，当然

html, body {
    height: 100%;
}
body {
    margin: 0;
}
img {
    width: 100%;
    height: 100%;
    vertical-align: bottom;
}

JSFiddle

如何在HTML中插入图像，使其无论屏幕大小如何都填满整个屏幕？

2 个答案: