纵横比全屏图像

Question

如何在网页中展示一张图片使其充满整个屏幕，但不会拉伸变形，保持纵横比。同时，让图片居中并且要么是：高度100%，宽度小于或等于100%的值x；或者是宽度100%，高度小于或等于100%的值y。这适用于全屏图片浏览应用程序。可以使用HTML或Javascript实现。

- Albert Renshaw

Answer 1

使用以下内容：

body, html {
    height: 100%;
    margin: 0;
    padding: 0;
}
div {  
    height: 100%;
}

img {
max-width: 100%;
max-height: 100%;
}

- Ian Hazzard

Answer 2

只需设置宽度或高度中的一个，另一个将根据图像边缘比例自动设置。

- nicael

---

啊！太好了，知道这个真是太棒了！谢谢 :) - Albert Renshaw

Answer 3

html {
  margin: 0;
  padding: 0;
}
.container {
  max-width: 100%;
}
.img-class {
  max-width: 100%;
  height: auto;
  position: relative;
}

如果需要，您可以使用绝对定位来确切地将容器div放置在屏幕上。

- Sachin Kanungo