将div的背景图像缩放到固定宽度； 自动缩放高度
[英]Scale background image of div to a fixed width; auto-scale height
问题描述
类似于CSS背景图片以适合宽度，高度应按比例自动缩放 ，我想将图片缩放到固定宽度，并且高度不受限制。
但是，与该问题不同的是，这是针对<div> ，而不是针对<body> ，这似乎会引入问题。
我尝试使用CSS3属性background-size: cover ，但是显示了2张这样的图像（正确的宽度，但不够高）：
我也尝试过使用background-size: contain ，但是这样显示（不够宽，因此不够高）：
我正在尝试使图像看起来像这样：
这是我设置的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;
}
这是使用JavaScript 更新的JSFiddle 。
3 个解决方案
解决方案1
0 2013-07-18 06:03:45
我已经使用了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';
}
}
这是最后的小提琴 。
解决方案2
-1 2013-07-18 05:49:39
有什么理由不能在div元素内添加<img src='base64'/> ，然后在CSS中使用div{background: 0px 0px}隐藏div背景并使用img{width:171px} ？ 参见修改后的jsFiddle 。 这样就可以解决问题，但是不确定是否可以添加img标签。 让我知道，我将看看是否可以找到其他解决方案。
解决方案3
-1 2013-07-18 05:50:57
.divname img {
height: auto;
width: 171px;
}
然后为html执行以下操作：
<div class="divname"><img src="image.jpg"></div>
根据内容的宽度和高度自动缩放内容<iframe>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.