这似乎微不足道，但毕竟研究和编码我无法让它发挥作用。条件是：
基本上我想要的是：
.fit {
max-width: 99%;
max-height: 99%;
}
<img class="fit" src="pic.png">
上面代码的问题在于它不起作用：pic通过添加垂直滚动条来获取所需的所有垂直空间。
我自己可以使用PHP，Javascript，JQuery，但我会因为只支持CSS的解决方案而被杀死。我不在乎它是否在IE中不起作用。
答案 0 :(得分：74)
更新2018-04-11
这是一个无Javascript，仅限CSS的解决方案。图像将动态居中并调整大小以适合窗口。
<html>
<head>
<style>
* {
margin: 0;
padding: 0;
}
.imgbox {
display: grid;
height: 100%;
}
.center-fit {
max-width: 100%;
max-height: 100vh;
margin: auto;
}
</style>
</head>
<body>
<div class="imgbox">
<img class="center-fit" src='pic.png'>
</div>
</body>
</html>
使用JQuery的[other，old]解决方案设置图像容器的高度（在下面的示例中为body），以便图像上的max-height属性按预期工作。调整客户端窗口大小时，图像也会自动调整大小。
<!DOCTYPE html>
<html>
<head>
<style>
* {
padding: 0;
margin: 0;
}
.fit { /* set relative picture size */
max-width: 100%;
max-height: 100%;
}
.center {
display: block;
margin: auto;
}
</style>
</head>
<body>
<img class="center fit" src="pic.jpg" >
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript" language="JavaScript">
function set_body_height() { // set body height = window height
$('body').height($(window).height());
}
$(document).ready(function() {
$(window).bind('resize', set_body_height);
set_body_height();
});
</script>
</body>
</html>
注意：用户gutierrezalex在此页面上打包了一个与JQuery插件非常相似的解决方案。
答案 1 :(得分：40)
这是一个简单的CSS解决方案（JSFiddle），无处不在，移动和IE包括：
CSS 2.0：
html, body {
height: 100%;
margin: 0;
padding: 0;
}
img {
padding: 0;
display: block;
margin: 0 auto;
max-height: 100%;
max-width: 100%;
}
HTML：
<body>
<img src="images/your-image.png" />
</body>
答案 2 :(得分：22)
CSS3引入了相对于视口测量的新单位，在这种情况下是视窗。这些是vh和vw，分别测量视口高度和宽度。这是一个简单的CSS解决方案：
img {
max-width: 100%;
max-height: 100vh;
height: auto;
}
对此的一个警告是，只有在页面上没有其他元素贡献高度时它才有效。
答案 3 :(得分：15)
如果您愿意在图像周围放置容器元素，那么纯CSS解决方案很简单。你看，当父元素垂直延伸以包含它的子元素时，99％的高度没有意义。父母需要有一个固定的高度，比如......视口的高度。
<强> HTML
<!-- use a tall image to illustrate the problem -->
<div class='fill-screen'>
<img class='make-it-fit'
src='https://upload.wikimedia.org/wikipedia/commons/f/f2/Leaning_Tower_of_Pisa.jpg'>
</div>
<强> CSS
div.fill-screen {
position: fixed;
left: 0;
right: 0;
top: 0;
bottom: 0;
text-align: center;
}
img.make-it-fit {
max-width: 99%;
max-height: 99%;
}
使用the fiddle进行游戏。
答案 4 :(得分：5)
我知道这里已经有一些答案，但这是我使用的答案：
max-width: 100%;
max-height: 100vh;
width: auto;
margin: auto;
答案 5 :(得分：3)
我的一般懒惰CSS规则：
.background{
width:100%;
height:auto;
background: url('yoururl.jpg') no-repeat center;
background-position: 50% 50%;
background-size: 100% cover!important;
overflow:hidden;
}
如果您的图像开始处于低分辨率（这与您的图像质量和尺寸大小有关），则可以放大图像。 要使图像居中，您也可以尝试（在CSS中）
display:block;
margin: auto 0;
使图像居中
HTML中的：
<div class="background"></div>
答案 6 :(得分：3)
调整图像大小以使最长边适合屏幕并保持其纵横比
img[src$="#fit"] {
width: 100vw;
height: auto;
max-width: none;
max-height: 100vh;
object-fit: contain;
}
width: 100vw - 图片宽度为观看端口的100％height: auto - 图像高度将按比例缩放 max-height: 100vw - 如果图像高度超过视口，它将减少以适应屏幕，因此图像宽度将因以下属性而减小
object-fit: contain - 缩放替换的内容以在适合元素的内容框时保持其宽高比
注意：仅在IE 16.0
object-fit
答案 7 :(得分：1)
width: 100%;
overflow: hidden;
我相信应该这样做。
答案 8 :(得分：1)
html, body{width: 99%; height: 99%; overflow: hidden}
img.fit{width: 100%; height: 100%;}
或者可以看一下： http://css-tricks.com/how-to-resizeable-background-image/
答案 9 :(得分：1)
我有类似的要求，不得不做基本的CSS和JavaScript。没有JQuery可用。
这就是我的工作。
<html>
<head>
<style>
img {
max-width: 95% !important;
max-height: 95% !important;
}
</style>
<script>
function FitImagesToScreen() {
var images = document.getElementsByTagName('img');
if(images.length > 0){
for(var i=0; i < images.length; i++){
if(images[i].width >= (window.innerWidth - 10)){
images[i].style.width = 'auto';
}
}
}
}
</script>
</head>
<body onload='FitImagesToScreen()'>
----
</body>
</html>
注意：我没有使用100％的图像宽度，因为总有一些填充要考虑。
答案 10 :(得分：1)
对于子孙后代，如果您想要一个能够以1-6大小回答7并能将大小调整到超出原始大小的解决方案，那么我已经为该问题开发了一个完整的解决方案：
<!DOCTYPE html>
<html>
<body style="overflow:hidden; margin:0; text-align:center;">
<img src="https://file-examples-com.github.io/uploads/2017/10/file_example_JPG_2500kB.jpg" style="height:100vh; max-width:100%; object-fit: contain;">
</body>
</html>
答案 11 :(得分：0)
在@Rohit的答案的基础上，此功能修复了Chrome标记的问题，可靠地调整了图像的大小，还适用于垂直堆叠的多个图像，例如<img src="foo.jpg"><br><img src="bar.jpg"><br><img src="baz.jpg">可能有更优雅的方法。
<style>
img {
max-width: 99vw !important;
max-height: 99vh !important;
}
</style>
<script>
function FitImagesToScreen() {
var images = document.getElementsByTagName('img');
if(images.length > 0){
document.styleSheets[1].rules[0].style["max-height"]=((100/images.length)-1)+"vh";
for(var i=0; i < images.length; i++){
if(images[i].width >= (window.innerWidth - 10)){
images[i].style.width = 'auto';
}
}
}
}
</script>
</HEAD>
<BODY onload='FitImagesToScreen()' onresize='FitImagesToScreen()'>
<img src="foo.png">
</BODY>
答案 12 :(得分：0)
简单点。谢谢
.bg {
background-image: url('https://images.unsplash.com/photo-1476820865390-c52aeebb9891?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&w=1000&q=80');
background-repeat: no-repeat;
background-size: cover;
background-position: center;
height: 100vh;
width: 100vw;
}<div class="bg"></div>
答案 13 :(得分：0)
在您的样式标签中使用此代码
<style>
html {
background: url(imagename) no-repeat center center fixed;
background-size: cover;
height: 100%;
overflow: hidden;
}
</style>
答案 14 :(得分：0)
我在 w3 上找到了这个纯 CSS 解决方案并对其进行了测试。
<!DOCTYPE html>
<html>
<head>
<style>
body, html {
height: 100%;
margin: 0;
}
.bg {
/* The image used */
background-image: url("../yourimage.jpg");
/* Full height */
height: 100%;
/* Center and scale the image nicely */
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
</style>
</head>
<body>
<div class="bg"></div>
</body>
</html>