javascript - 如何动态设置图像尺寸？

我试图将图像元素放在背景图像的顶部。

图像元素将需要根据用户的动作进行动画处理。我的背景图片CSS如下所示：

的CSS

body {
    background: url('test.png') no-repeat center center;
    -webkit-background-size: 100% auto;
    background-color: #00ABBA;
    -moz-background-size: 100% auto;
    -o-background-size: 100% auto;
    background-size: 100% auto;
}

html

>

因此背景图片将始终是屏幕的100％，并且具有响应能力。

但是，图像元素具有设置的大小，我不确定如何设置大小以适应背景图像的大小（较大的屏幕具有较大的背景图像/较小的屏幕具有较小的背景图像）。

谁能帮助我将图像元素设置为与背景图像一致的大小？非常感谢！

最佳答案

您在这里有几个选择。

他们中的大多数归结为将背景图像的某些“基本尺寸”与其实际尺寸进行比较。

假设您在背景为1000像素宽和700像素高时选择数字。那是我们的基本尺寸。

var baseWidth = 1000;
var baseHeight = 700;

现在，我们需要知道最终的结果。为此，我们获得具有背景的元素的大小。为了简单起见，假设div的ID为“背景”。

var backgroundElement = document.getElementById('background');
var currentWidth = backgroundElement.width;
var currentHeight = backgroundElement.height;

（请注意，填充，边距，边框等可能会影响宽度的大小，因此您可能希望使用jQuery之类的第三方库，或者确保将它们考虑在内以确保合适的尺寸）。

然后，相对而言，我们想知道我们做了多少更改。

var scaleWidth = currentWidth / baseWidth;
var scaleHeight = currentHeight / baseHeight;

如果我们大于基数，则scale *大于0。如果小于基数，则scale *小于零。

现在，我们决定要做什么。假设image元素的ID为“ image”。

var image = document.getElementById('image');

如果我们想增加图像并且不关心保存宽高比：

image.width = image.width * scaleWidth;
image.height = image.height * scaleHeight;

如果我们确实要保存长宽比并希望将其全部保持在div之内。

image.width = image.width * Math.min(scaleWidth, scaleHeight);
image.height = image.height * Math.min(scaleWidth, scaleHeight);

（请注意，如果长宽比可以急剧变化，则该代码段会稍微复杂一些，因为您必须确保生成的大小足够小，以便事后仍然可以容纳。有时，您需要的比例尺会小于两个scaleWidth和scaleHeight）。

如果要移动它的位置，请使其绝对定位，然后按比例移动它。

// Assumes it already has an absolute position of top and left already set.
image.style.left = parseInt(image.style.left.replace(/[a-z]+$/, '') * scaleWidth;
image.style.top = parseInt(image.style.top.replace(/[a-z]+$/, '')) * scaleHeight;

等等...

基本上，一旦确定了基准大小并知道了比例，就可以开始相对于基准进行调整，然后可以根据背景进行调整。