3

我正在为电影摄影师制作作品集。他们还进行大量摄影，并且希望他们的图像缩略图保持成比例，以便图像在缩小时不会失去任何美感。

我正在寻找的是一种使图像保持其原始比例的方法，但可以缩放它们并将它们放入容器 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;
}

这非常适合缩放，但它仍然会切断图像。（这是我试图避免的）

我一直在像 tweeker 一样搜索冰毒，但找不到任何可以解决这个问题的东西。可能是我正在寻找无法以我想要的方式解决的东西。

无论如何.. tl;博士：

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

这是我正在努力实现的一个例子。

4

1 回答 1

0

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

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;
}}
于 2013-04-14T09:23:47.117 回答