Question

与CSS background image to fit width, height should auto-scale in proportion类似，我想将图像缩放到固定宽度，高度不受限制。

不同于这个问题，这适用于<div>，而不是<body>，这似乎会带来问题。

我尝试过使用CSS3属性background-size: cover，但是显示了2张这样的图片（正确的宽度但不够高）：

我也尝试使用background-size: contain，但是这样显示（不够宽，因此不够高）：

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

如何让<div>为171px宽，还可以自动缩放高度？

图像的尺寸未知。图像必须格式为<div style="background-image: url('base64')">，（而不是<img src="base64"> - 由于它转发到的CLI程序的限制，但我可以修改任何其他HTML或CSS

我也尝试使用JavaScript来计算高度应该是多少。这样做很好，但<div>实际上并没有在最后重新调整大小：

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

这是使用JavaScript的an updated JSFiddle。

Answer 1

我已经使用了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';
    }
}

这是a working JSFiddle。

我仍然有兴趣知道这是否可以用纯CSS3。你是这么想的！

我进一步改进了代码。现在，小于171px宽的图像不拉伸：

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

这是final Fiddle。

Answer 2

您有什么理由不能在div元素中添加<img src='base64'/>然后在css中div{background: 0px 0px}隐藏div背景并拥有img{width:171px}？请参阅修改后的jsFiddle。这解决了问题，但不确定您是否能够添加img标记。让我知道，我将看看是否可以找到另一种解决方案。

Answer 3

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

}

然后为html做这个：

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

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

3 个答案: