用JQuery实现不同纵横比DIV与其它div高度匹配
使用jQuery实现不同纵横比的DIV与其他DIV高度匹配可以通过以下步骤实现：
- 首先，确保在HTML文件中引入了jQuery库文件。
- 给需要匹配高度的DIV元素添加一个共同的类名，例如"match-height"。
- 使用jQuery的
each()方法遍历所有具有该类名的DIV元素。 - 在遍历过程中，获取每个DIV元素的宽度和纵横比。
- 根据纵横比计算出相应的高度。
- 使用jQuery的
css()方法将计算得到的高度应用到每个DIV元素上。
以下是一个示例代码：
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<style>
.match-height {
width: 200px;
border: 1px solid black;
margin-bottom: 10px;
}
</style>
</head>
<body>
<div class="match-height" data-aspect-ratio="1.5"></div>
<div class="match-height" data-aspect-ratio="0.75"></div>
<div class="match-height" data-aspect-ratio="2"></div>
<script>
$(document).ready(function() {
$('.match-height').each(function() {
var aspectRatio = parseFloat($(this).data('aspect-ratio'));
var width = $(this).width();
var height = width / aspectRatio;
$(this).css('height', height);
});
});
</script>
</body>
</html>在上述示例代码中，我们给需要匹配高度的DIV元素添加了一个data-aspect-ratio属性，用于指定纵横比。通过遍历具有.match-height类名的DIV元素，获取其宽度和纵横比，并计算出相应的高度，然后将高度应用到每个DIV元素上。
这样，不同纵横比的DIV元素就可以实现与其他DIV元素的高度匹配了。
腾讯云相关产品和产品介绍链接地址：
- 腾讯云官网：https://cloud.tencent.com/
- 云服务器（CVM）：https://cloud.tencent.com/product/cvm
- 云数据库 MySQL 版：https://cloud.tencent.com/product/cdb_mysql
- 云原生应用引擎（TKE）：https://cloud.tencent.com/product/tke
- 云存储（COS）：https://cloud.tencent.com/product/cos
- 人工智能（AI）：https://cloud.tencent.com/product/ai
- 物联网（IoT）：https://cloud.tencent.com/product/iotexplorer
- 移动开发（移动推送、移动分析）：https://cloud.tencent.com/product/mps
- 区块链（BCS）：https://cloud.tencent.com/product/bcs
- 元宇宙（Tencent Real-Time 3D）：https://cloud.tencent.com/product/trtc
相关·内容
我使用JQuery使DIVs具有与宽度相同的高度，并相应地进行更新。important;<script src="https://ajax.goo
浏览 13提问于2017-07-24得票数 0
回答已采纳
3回答
我目前有一个比包含div的图像更大的图像，其中div的宽度为70px，高度为45px。如果图像的高边大于宽度，请调整图像的大小，使宽度与div宽度匹配
浏览 0提问于2014-01-15得票数 2
我试图找出一种方法，使图像div有和保持3:2与不同的网页浏览器大小(移动响应等)的纵横比。我想要能够调整我的浏览器窗口和图像大小始终有3:2，所以我希望图像的高度也调整大小。有什么方法可以用我当前的代码来实现这一点吗？我也希望能够使蓝色文本div更小，而不必使上面的图像更大，因为如果我降低蓝色div的高度百分比，我将不得不增加上面的图片div来构成100%父元素
浏览 1提问于2018-01-10得票数 0
回答已采纳
1回答
当使用最大高度时，我遇到了一些流畅图像的问题。我试图将图像绑定在一个最大为450x450的框中，或者任何与图像的纵横比不同的任意框中。发生的情况是，图像的宽度被限制为450px，但高度却不是这样，并且图像溢出了包装器div。我的代码是： <div class="container">
<img sr
浏览 4提问于2013-04-03得票数 0
2回答
我认为实现这一点的最好技术是为每个使用图像作为背景图像的图像创建一个div。问题是我不知道如何将div的高度与图像的纵横比相匹配。我已经尝试设置宽度: 90%和高度:自动，但它不起作用。
浏览 0提问于2015-08-24得票数 2
回答已采纳
1回答
缩放SVG到相邻元素的高度
、、、、
我试图用固定的纵横比缩放SVG，以匹配相邻元素的高度(包含一系列不同元素的div )。为了演示起见，这里我只是将SVG (#triangle)的高度设置为10rem，正好与右边的div (#text)的高度相匹配。但是如果你调整窗口的大小，一切都会改变。(请参阅本问题结尾处的代码片段)我想要实现的是能够调整窗口的大小，并且当文本包装(改变其高度
浏览 5提问于2021-12-15得票数 2
回答已采纳
3回答
我想使用100%的宽度和比例高度的youtube链接。<script src="http://code.jquery.com/<
浏览 2提问于2017-02-27得票数 3
回答已采纳
我正在尝试保持div的1:1宽高比。即使调整了浏览器窗口的大小，也必须保持纵横比。宽度和高度必须等于div必须与图像分辨率匹配。该怎么做呢？我是css的新手，因此寻求任何帮助。<div class="wrapper"><img src="someim
浏览 9提问于2021-03-04得票数 0
回答已采纳
目前我有一个固定大小的HTML5画布，如下所示：<canvas id="example" width="350" height="250"></canvas>然而，我希望能够缩放画布，使其与周围的容器大小相同，显然它仍然必须保持相同的纵横比。例如：
<div class=
浏览 4提问于2012-10-04得票数 3
回答已采纳
5回答
因此，为了保持纵横比，如果宽度较大，则宽度可能会减小，并且根据纵横比的剩余空间将填充一些背景颜色(我可以在div上给出颜色)。类似地，如果高度更大，则高度将调整为按纵横比显示，然后剩余空间将用背景填充。任何帮助都将不胜感激。
浏览 1提问于2013-05-08得票数 0
当我调整大小时，我希望视频元素能100%适合父div，但这是我做不到的地方。到目前为止，这就是我所拥有的：.my-div width: 320px; top: 200px;video_div.id = 'video-div'$(
浏览 3提问于2020-11-09得票数 1
回答已采纳
2回答
我希望有人能帮助我，或给我一些指导，如何实现这一点。我有液体除尘器，没有高度和宽度:100%。我想显示背景图像，这将适合屏幕大小和这个div元素。我也不能设置固定高度(它必须是响应的)，我已经找到了一个解决方案，通过使用图像的纵横比-它使用填充-底部百分比值，但这个解决方案只适用于固定的纵横比，例如16:9或4:3。我需要一些将是真实的流体。所以我想出来了，我需要一些脚本来自动检查背景图像的高宽比，并根据图像的纵横比
浏览 3提问于2013-12-04得票数 0
回答已采纳
3回答
根据高度计算顶点比宽度
、、、、
我有一个1280(宽)x 1024(h)的内联img，它包含在一个div中。divs尺寸设置为视口的100%(w/h)，并隐藏溢出。它必须保持其纵横比，我也希望图像始终居中。我知道，为了实现这一点，一些图像将被裁剪。
我相信，如果使图像高度与视口高度匹配，并根据图像的纵横比计算宽度，这将工作，但我不确定如何做到这一点。
浏览 2提问于2013-08-23得票数 0
标题有点误导，因为简单地保持和html元素的纵横比是微不足道的，使用的是宽度和填充底部或填充顶部的百分比。然而，我的场景有点不同。也许解决方案同样微不足道，但我的大脑被烧焦了。所以在我的例子中，我在一个容器div中有一个content div。假设容器div可以有任何尺寸和大小。要求是内部div需要保持它自己的纵横比，但也需要适合容器div的高度或宽度，无论哪一个与</em
浏览 2提问于2015-07-11得票数 3
1回答
我需要表示当前的视口形状的微型，拟合100%的包含元素的宽度或高度，作为适当的纵横比。我想提供一个预览的HTML结构将如何适合屏幕，因为它是在那个时候。可能看起来像这样。在这里，我使用零高度技巧与底部填充提供高宽比。/* for demonstration purposes only */
浏览 2提问于2022-09-14得票数 1
body{margin:0;}<body></body>从的一个用户坐标= .2，这是通过除以200/1000 (测试div宽度/ viewBox宽度属性)得到的。但矩形位于(30 per，97 per)，宽度和高度为10 per，10 per(根据计算，一些高度和宽
浏览 5提问于2012-02-01得票数 2
回答已采纳
1回答
但在CSS中，“响应图像”通常如下所示： max-width: 100%;}另外，我正在寻找一种不需要jQuery的解决方案。我要求这样做的原因是，有时设计师会要求这样的东西，其中有一个容
浏览 2提问于2015-02-26得票数 6
回答已采纳
有没有办法，在css中，自动裁剪图像，使其适合和纵横比，而不是强迫它到特定大小的div。当我接受用户图像时，我想接受一个大小的范围，大约正确的纵横比，而不是只有一个。该div图像使用自动宽度和高度，以最大限度地利用空间和可读性与不同的数字和不同的屏幕大小。我看过object-fit，但当div调整大小时，这似乎不起作用。图像有微小的，几乎无法检测到的大小差异，这会扰乱布局。
编辑:我希望高度
浏览 1提问于2016-12-06得票数 0
幻灯片div是旋转木马的一部分，其图像大小或纵横比不同。我如何在不失去质量的情况下将背景图像对中，而不管大小如何？我编写的代码对于正常大小的图像来说是完美的，但是如果图像较小(30 be乘30 be)，它将被拉伸以与div的宽度或高度相匹配。<div class="slide"></div>
width: 100%;
heigh
浏览 0提问于2019-02-02得票数 0
回答已采纳
我想在固定大小(100px X 100px)的div中显示任何大小(不同宽度和高度)的图像，而不改变其纵横比。我还想将图像与div中的中心对齐。我做了它，但不同宽度和高度的图像(6)是不会出现在中心，除非我改变它的纵横比。class="A"> </
浏览 1提问于2017-10-13得票数 7
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
对象存储
实时音视频
即时通信 IM活动推荐
腾讯云开发者
