保持图库HTML/CSS中的图像比例

Question

我正在为电影摄影师制作一个作品集。他们也做很多摄影，并且希望他们的图像缩略图保持比例，以便在缩小时不会失去任何美感。

我正在寻找一种方法，使图像保持其原始比例，但将其缩放并适配到容器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;
}

这对于缩放来说非常好用，但仍然会裁剪图像。（这正是我想避免的）

我一直像一个吸毒成瘾的人一样搜索，但找不到任何解决这个问题的方法。可能是因为我正在寻找一些无法按照我想要的方式解决的东西。

总之.. 简而言之：

我希望缩略图保持其原始图像比例，但大小约为原图的三分之一，并适合容器div。（具有固定的宽度和高度）有人有任何关于如何实现这一点的想法吗？

这里是我想要实现的示例。

- Jefferson

---

请返回翻译后的文本：https://dev59.com/OnA75IYBdhLWcg3w7tx6 和 http://unstoppablerobotninja.com/entry/fluid-images - Leniel Maccaferri

不要看啊，我知道如何制作流体图像。我正在尝试制作一个图库，其中的图像保持其原始比例..只是更小。并使这些图像集合适应一个div。 - Jefferson

你想把宽度和高度适应到一个容器中，而且所有的图片都是相同的比例吗？如果是这样，可以使用以下代码：img { max-width: 100%; } - Axel A. García

我会使用媒体查询。 - Kevin Lynch

我认为这是一个令人困惑的问题，您能否举个例子来说明您想要什么？ - Pigueiras

Answer 1

你尝试过根据你的div和图片比例将宽度设置为一些百分比吗？只需调用JavaScript检查图像和div的宽度，然后使用脚本相应地设置图像的CSS属性“width：”为所需百分比，高度为自动......如果高度更大，则反之亦然。但是，如果设置自动无效，请尝试手动设置比例。例如

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;
}}

- Dapu