Html CSS：如何将多个图像适配（和拉伸）到视口

我想创建一个简单的照片库。我想缩放每张照片，使其在窗口中的最大大小与原始比例一致

目前，我的每张照片都有以下样式的

html, body {
    height: 100%;
}    

img
{
    display:block;
    width:auto;
    height:auto;
    max-width:98%;
    max-height:95%;
}

这会很好地缩小图像的比例，使其过大以适合视口。但是，如果图像小于视口，则不会拉伸图像。你知道我如何在没有Javascript的情况下添加这种拉伸吗

我只能想出一个解决方案，要求我事先知道图像比率（然后我可以使用vh和vw值设置宽度和高度），我希望避免这种情况。另外，我不喜欢将其设置为具有

背景大小：cover

的跨div页面的背景图像。如果我不知道图像比率，这将在我的图像之间引入愚蠢的间隙

有什么想法吗？：）我知道这可能是不可能的

---

谢谢大家!

从您使用的img标签：

max-width:98%;
max-height:95%;

已更新：

请注意，下面两张图片的大小相差很大

<img src="http://appacyber.net/image/bg.jpg" alt="" />
<br />
<br />
<img src="http://appacyber.net/image/live-chat-img.png" alt="" />

<style>
img {
    border:0px;
    border:none;
    width:95%!important;
    height:95%!important;
}
</style>

img{
边界：0px；
边界：无；
宽度：95%！重要；
身高：95%！重要；
}

---

这样可以根据屏幕大小调整图像大小

尝试将此样式添加到所有图像中：

<style>
img {max-width:100%;
height:auto;
} 
</style>

img{最大宽度：100%；
高度：自动；
} 

请添加以下js和css

//页面初始化
jQuery（函数（）{
initBackgroundResize（）；
});
//拉伸背景以填充块
函数initBackgroundResize（）{
jQuery（'.bg stretch'）。每个（函数（）{
ImageStretcher.add({
集装箱:这个,，
图片：“img”
});
});
}
/*
*图像拉伸模块
*/
var图像拉伸器={
getDimensions:函数（数据）{
//计算元素坐标以适应遮罩
var比率=data.imageRatio | |（data.imageWidth/data.imageHeight），
slideWidth=data.maskWidth，
滑动高度=滑动宽度/比率；
if（滑块高度
.bg拉伸{
位置：绝对位置；
左：0；
右：0；
排名：0；
底部：0；
溢出：隐藏；
z指数：-1；
}

但图像将不正确地调整大小。使用最小高度和高度：自动。您可以仅为“宽度”或“高度”设置“宽度”，并为其他设置“自动”属性谢谢您的努力。有没有办法让它也适应视口的高度并保持比例？在您的演示中，如果框架太窄，则宽度始终为95%，高度超过100%。如果我将height:100%添加到body和html标记中，则纵横比不会保持：