Javascript 将div的背景图像缩放到固定宽度；自动缩放高度

与之类似，我希望将图像缩放到固定宽度，高度不受限制

与这个问题不同的是，这是针对

，而不是

，这似乎会带来问题

我尝试使用CSS3属性

background size:cover

，但它显示了两幅这样的图像（宽度正确，但不够高）：

我也尝试过使用

background size:contain

，但显示如下（不够宽，因此不够高）：

我试图让图像看起来像这样：

这是我的设置

如何使

的宽度达到

171px

，同时自动缩放高度

图像的尺寸未知。图像的格式必须是

，（不是

——因为它转发到的CLI程序受到限制），但我可以修改任何其他HTML或CSS

---

我还尝试使用JavaScript计算高度。这很好，但是

的最终大小实际上没有调整：

var divs = document.getElementsByTagName('div');
for(var i = 0; i < divs.length; i++)
{
    var img = new Image();
    img.src = divs[i].style.backgroundImage.replace(/url\((['"])?(.*?)\1\)/gi, '$2');
    var ratio = img.width / 171;
    var height = Math.floor(img.height / ratio);
    alert(height);
    divs[i].height = height;
}

var divs=document.getElementsByTagName（'div'）；
对于（变量i=0；i

---

下面是JavaScript。

任何不能在div元素中添加

的原因，然后在css中使用

div{background:0px 0px}

隐藏div背景并使用

img{width:171px}

？查看修改后的。这解决了问题，但不确定是否能够添加

img

标记。请告诉我，我会看看是否可以找到其他解决方案

.divname img {
    height: auto;
    width: 171px;

}

对于html，请执行以下操作：

    <div class="divname"><img src="image.jpg"></div>

---

我已经使用了JS选项。我只需要使用

divs[I].style.height=height+'px'

而不是

divs[I].height=height

：

window.onload = function()
{
    var divs = document.getElementsByTagName('div');
    for(var i = 0; i < divs.length; i++)
    {
        var img = new Image();
        img.src = divs[i].style.backgroundImage.replace(/url\((['"])?(.*?)\1\)/gi, '$2');
        var ratio = img.width / 171;
        var height = Math.floor(img.height / ratio);
        divs[i].style.height = height + 'px';
    }
}

---

以下是。

这就是我所说的“图像必须采用这种格式”“。不幸的是，我必须使用

背景图像

。HTML文件被发送到命令行工具以将其转换为PDF。不幸的是，它不喜欢

s，只能使用

背景图像
s。请在投票前澄清您的问题，因为原始帖子中没有详细说明。谢谢。我以前已经说过了。检查句子的最后一句。另外，为了让您知道，删除您的答案实际上会增加您的声誉，因为它有一个负分数。我不能使用
标记，因为另一个答案解释了原因。然后只需添加背景图像：url（“”）；在前面的高度和宽度
window.onload = function()
{
    var divs = document.getElementsByTagName('div');
    for(var i = 0; i < divs.length; i++)
    {
        var img = new Image();
        img.src = divs[i].style.backgroundImage.replace(/url\((['"])?(.*?)\1\)/gi, '$2');

        if(img.width > 170)
        {
            var ratio = img.width / 171;
            var height = Math.floor(img.height / ratio);
        }

        else
        {
            var height = img.height;
            divs[i].style.backgroundSize = 'auto';
            divs[i].style.backgroundPosition = 'center';
        }

        divs[i].style.height = height + 'px';
    }
}