类似于CSS background image to fit width, height should auto-scale in proportion ，我想将图像缩放到固定宽度，高度不受限制。
不过，与那个问题不同的是，这是针对 <div> 的, 而不是 <body> ，这似乎引入了问题。
我试过使用 CSS3 属性 background-size: cover , 但它显示了 2 个像这样的图像(正确的宽度但不够高):
我也试过使用 background-size: contain , 但显示如下(不够宽，因此不够高):
我试图让图像看起来像这样:
这是 a JSFiddle我已经设置好了。
我怎样才能得到 <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;
}
这是 an updated JSFiddle使用 JavaScript。
最佳答案
我已将其与 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 的图像不会拉伸(stretch):
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 .
关于javascript - 将 div 的背景图像缩放到固定宽度；自动缩放高度，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/17715201/