0

类似于CSS 背景图像以适应宽度，高度应该按比例自动缩放，我想将图像缩放到固定宽度，高度不受限制。

不过，与那个问题不同的是，这是针对 a 的<div>，而不是针对 的<body>，这似乎会引入问题。

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

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

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

这是我设置的 JSFiddle 。

我怎样才能让<div>'s171px变宽，但还能自动缩放高度？

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

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

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更新的 JSFiddle。

4

3 回答 3

0

我已经让它与 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';
    }
}

这是一个有效的 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';
    }
}

这是最后的 Fiddle。

于 2013-07-18T06:03:45.903 回答
-1

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

于 2013-07-18T05:49:39.623 回答
-1 
.divname img {
    height: auto;
    width: 171px;

}

然后对于 html 执行此操作：

    <div class="divname"><img src="image.jpg"></div>
于 2013-07-18T05:50:57.463 回答