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

这适用于缩放，但它仍然会切断图像。（这是我想避免的）

我一直在搜索关于meth的推文，但找不到解决这个问题的任何东西。可能是因为我正在寻找一些我想要的方式无法解决的问题。

无论如何.. tl;博士：

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

这是我想要实现的example。

Answer 1

您是否尝试根据您的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;
}}

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

1 个答案: