js获取背景图片宽高比后根据浏览器宽度动态赋值div.style.height

Posted 2023-04-27

div的width:100%，background-size:100% auto。div宽度这样是根据浏览器窗口宽度自适应，div高度要js赋值。js获取背景图片长宽，计算出宽高比。div实时宽度*背景图的长宽比=div高度。

你怎么知道我有答案？昨天是回答了，结果无缘无故被弊，再试试吧

【注意】因为百度知道这几天的高亮显示不正常，下面代码中前面的空格都是【全角】，你复制粘贴之后自己用编辑器查找/替换全部吧。

<style type="text/css">
#div
    width: 100%;
    background: url("bg.jpg") no-repeat;
    background-size: 100% auto;
    border: 1px solid #f00;

</style>

来自：求助得到的回答 参考技术A varimage=new Image();
image.src=//你的背景图片的src;
image.onload=function()
var divelement = document.getElementById(你的div的id);
divelement.style.height=(image.height*divelement.offsetWidth)/image.width +"px";


或

varimage=new Image();
image.src=//你的背景图片的src;
image.addEventListener("complete",evt);
function evt()
var divelement = document.getElementById(你的div的id);
divelement.style.height=(image.height*divelement.offsetWidth)/image.width +"px";
;本回答被提问者采纳

16:9 宽高比，固定宽度

【中文标题】16:9 宽高比，固定宽度

【英文标题】：16:9 aspect ratio with fixed width

【发布时间】：2011-12-22 07:17:26

【问题描述】：

例如，如果我要嵌入 YouTube 视频

<iframe  src="http://www.youtube.com/embed/25LBTSUEU0A" class="player" frameborder="0" allowfullscreen></iframe>

如果使用 jQuery，我会设置纵横比为 16:9 的高度，因此如果宽度为 560，则高度应为 315px。 我有这个 jquery 来设置高度，但我不知道如何应用 16:9 比例

$('.player').parent().attr('width', ':9ratio');

或者这可以使用 css 巧妙地完成吗？

【问题讨论】：

Get YouTube Video dimensions (width/height) 的可能重复项

【参考方案1】：

最好的方法是简单地使用 CSS，因为你可以保留 它在页面加载时响应并且没有可见 iframe 宽度和高度中的“跳转”。

另外，你不必设置固定宽度（虽然你可以）

像这样：

iframe width: 100%; height: calc(~'100% * 9/16');

【参考方案2】：

相当老的问题，但如果有人仍在寻找答案，这可能是一种更好的方法。

函数getRelativeWidth（比率，crntHght） ratio = ratio.split(":"); var wdthRto = 比率[0]; var hghtRto = 比率[1]; 返回 ((wdthRto*crntHght) / hghtRto); 函数getRelativeHeight（比率，crntWdth） ratio = ratio.split(":"); var wdthRto = 比率[0]; var hghtRto = 比率[1]; 返回 ((crntWdth*hghtRto) / wdthRto); var wdth = 1600; 变量 hght = 900; var getHeight = getRelativeHeight("16:9", wdth); var getWeight = getRelativeWidth("16:9", hght); 控制台.log(getHeight); 控制台.log(getWeight);

【参考方案3】：

纵横比只是宽度：高度。因此，如果您想根据已知宽度计算高度，这非常简单。

//width=560, wanted height is 315
$('.player').parent().attr('height', 560*9/16);

【讨论】：

对于奖励积分，相反的是什么？例如，当您有高度但想要宽度时？

翻转除数，例如 315 * 16/9 = 560

【参考方案4】：

我建议为此使用 css calc 而不是 jQuery：

width: 560px;
height: calc(560px * 9/16);

【讨论】：

这实际上是一个非常好的解决方案。我在 2011 年问过这个问题，我一直在想为什么我们不能通过 css 做到这一点。现在是绝妙的解决方案。

【参考方案5】：

$('.player').parent().attr('width', 560*9/16)

【讨论】：

是否保持纵横比？

如果 iframe 要更改大小，您是否希望它保持纵横比？