在图库html/css中保持图像比例

我正在为电影摄影师制作一个作品集。他们也做了大量的摄影工作，他们希望自己的图像缩略图保持比例，这样图像缩小后不会失去任何美感

我要寻找的是一种方法，使图像保持其原始比例，但缩放它们并将其装配到容器div中（具有设置的宽度和高度）

我基本上什么都试过了。包括按比例缩放图像的传统方式：

background:url(../images/banner.jpg) no-repeat center center fixed; 
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}

这对于缩放效果很好，但仍然会切断图像。（这就是我试图避免的）

我一直在寻找冰毒，但找不到任何解决这个问题的方法。这可能是因为我在寻找一些无法以我想要的方式解决的问题

无论如何。。tl；博士：

我希望缩略图保持其原始图像比例，但要小约3倍，并适合容器分割（具有固定的宽度和高度），有人对如何实现这一点有任何想法吗

---

这是我想要实现的目标的一个例子

您是否尝试过根据您的div和图像比率将宽度设置为某个%。只需调用javascript检查图像和div的宽度，然后相应地将图像的css属性“width:”设置为要求使用脚本和高度的百分比为auto…。如果高度更大，则反之亦然 但如果设置自动不起作用，尝试手动设置比率 比如说

function set()
{
var img=document.getElementById('anyimg');
var iwidth=img.width;
var iheight=img.height;
var wr,hr;
var mydiv = document.getElementById('anydiv');
divH=mydiv.height;
divW=mydiv.width;
wr=iwidth/divW;
hr=iheight/divH;
if(hr>wr)
{
image.height=divH;
image.width=iwidth/hr;
else
{
image.height=divH;
image.width=iwidth/hr;
}}

---

不知道。。我知道如何制作流体图像。我想用保持原始比例的图像制作一个画廊。。只有小一点。并将图像集合放入一个分区中。是否要将宽度和高度放入一个容器中。。。所有的图像都是相同的比例？如果是这样的话，请使用：

img{max width:100%；}

我会使用媒体查询我认为这是一个令人困惑的问题，你能举个例子说明你想要什么吗？