按比例缩放所有图像以适合容器 [英] Scale all images to fit container proportionally

问题描述

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

I am building a customization script where a user can upload an image and drag it around a template image to get a desired result. The problem is the template image is over 1000px tall and wide, so I put it inside a container limiting it's height/width.

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

How do I make it so the uploaded image is scaled exactly the same so when I create the image via PHP I can take the left: and top: CSS values and apply them to the much larger template image and uploaded image?

当前的 CSS:

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

推荐答案

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

I'm not quite sure if that is what you are asking for … anyway:

CSS3 属性 background-size: 100% 让您指定背景图像应填充容器的大小并按比例拉伸.连同 background-repeat: no-repeat 它可能正是您要找的:

The CSS3 property background-size: 100% lets you specify that the background image of should fill out the container's size and stretch proportionally. Together with background-repeat: no-repeat it might be what you are looking for:

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

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

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

这篇关于按比例缩放所有图像以适合容器的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！