按比例缩放所有图像以适合容器答案

【问题标题】：Scale all images to fit container proportionally按比例缩放所有图像以适合容器
【发布时间】：2012-07-24 00:18:36
【问题描述】：

我正在构建一个自定义脚本，用户可以在其中上传图像并将其拖动到模板图像周围以获得所需的结果。问题是模板图像的高和宽超过 1000px，所以我把它放在一个限制它的高度/宽度的容器中。

如何使上传的图像缩放完全相同，因此当我通过 PHP 创建图像时，我可以获取 left: 和 top: CSS 值并将它们应用于更大的模板图像和上传的图像?

当前的 CSS：

#template {
    position: relative;
    padding: 0;
    width: 500px;
    height: 500px;
    z-index: 1;
}
#uploaded {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 2;
}

【问题讨论】：

这个想法是让每张图片按其原始高度/宽度的 50% 缩放。因此，当通过我的 PHP 应用它时，我可以获取上传图像的像素位置并将其应用到我的脚本中。原始图像对于任何人来说都太大了，所以我的想法是让它们看起来更小，以便它们适合我的网站，一旦提交，我可以将像素位置乘以 2 并创建更大的图像
对不起，我没有关注你。是否所有图像都将上传为 1000 像素 x 1000 像素？您不能简单地使用现有的 PHP 类之一来缩小它们吗？

标签： html css scale

【解决方案1】：

我不太确定这是否是您要求的……无论如何：

CSS3 属性background-size: 100% 可让您指定背景图像应填充容器的大小并按比例拉伸。再加上background-repeat: no-repeat，它可能就是您要找的东西：

#uploaded {
    height: 500px;
    width: 500px;

    background-image: url(...);
    background-size: 100%;
    background-repeat: no-repeat;
}

演示：http://jsfiddle.net/pu76s/3/

【讨论】：