根据背景图像的纵横比和固定的高度动态改变div大小
，可以通过以下步骤实现：
- 获取背景图像的纵横比：通过JavaScript代码获取背景图像的宽度和高度，然后计算纵横比（宽度除以高度）。
- 监听窗口大小变化事件：使用JavaScript代码监听窗口大小变化事件，当窗口大小发生变化时，触发相应的函数。
- 计算div的宽度：根据当前窗口的宽度和背景图像的纵横比，计算出div的宽度。可以使用CSS的calc()函数来实现动态计算。
- 设置div的样式：使用JavaScript代码设置div的宽度和高度，以及其他样式属性，如背景图像、边框、内边距等。
以下是一个示例的代码实现：
<!DOCTYPE html>
<html>
<head>
<style>
.dynamic-div {
height: 300px; /* 固定的高度 */
background-image: url('background.jpg'); /* 背景图像 */
background-size: cover; /* 背景图像填充整个div */
border: 1px solid #ccc; /* 边框样式 */
padding: 10px; /* 内边距 */
}
</style>
</head>
<body>
<div class="dynamic-div"></div>
<script>
function resizeDiv() {
var backgroundWidth = 800; // 背景图像的宽度
var backgroundHeight = 600; // 背景图像的高度
var aspectRatio = backgroundWidth / backgroundHeight; // 背景图像的纵横比
var windowHeight = window.innerHeight; // 窗口的高度
var divWidth = windowHeight * aspectRatio; // 计算div的宽度
var div = document.querySelector('.dynamic-div');
div.style.width = divWidth + 'px'; // 设置div的宽度
}
window.addEventListener('resize', resizeDiv); // 监听窗口大小变化事件
resizeDiv(); // 初始化时调整div的大小
</script>
</body>
</html>在上述示例中，通过JavaScript代码获取背景图像的宽度和高度，并计算出纵横比。然后使用window.addEventListener()方法监听窗口大小变化事件，并在事件触发时调用resizeDiv()函数。resizeDiv()函数根据当前窗口的高度和背景图像的纵横比计算出div的宽度，并通过设置div.style.width属性来改变div的大小。
这样，无论窗口大小如何变化，div都会根据背景图像的纵横比和固定的高度动态改变大小。
相关·内容
2回答
我有液体除尘器，没有高度和宽度:100%。我想显示背景图像，这将适合屏幕大小和这个div元素。但遗憾的是，我不能使用背景封面或任何其他通常可以在现代浏览器中工作的解决方案。我也不能设置固定高度(它必须是响应的)，我已经找到了一个解决方案，通过使用图像的纵横比-它使用填充-底部百分比值，但这个解
浏览 3提问于2013-12-04得票数 0
回答已采纳
1回答
我使用光滑滑块()来显示各种大小的图像(包括肖像和风景图片)。图像显示为div的背景图像属性
但是，滑块具有固定的开箱宽度/高度。我的要求是让所有光滑的div都有一个固定的高度-但一个可变的宽度基于肖像或风景图片。在下面的代码中，图像2,3是纵向模
浏览 21提问于2017-06-30得票数 0
2回答
我正在尝试做的是有一个固定高度的父div (紫色)。在紫色div中，我希望橙色div保持纵横比并放大到父div的高度。如果我改变父div的大小，橙色的div应该根据它的纵横比进行相应的缩放。注意:尝试在没
浏览 0提问于2016-12-17得票数 1
5回答
我想在400 * 400的固定尺寸的正方形内显示图像。因此，为了保持纵横比，如果宽度较大，则宽度可能会减小，并且根据纵横比的剩余空间将填充一些背景颜色(我可以在div上给出颜色)。类似地，如果高度更大，则高度将调整为按纵横比显示，然后剩余空间将用背景填充。
有谁能帮我实现这一点吗？这可以用im
浏览 1提问于2013-05-08得票数 0
1回答
我正在尝试在一个框架内创建一个包含一组图像的画廊。在画廊中的第一张图片我试图有一个动态图片，它有一个窗口的高度，以及一个相应的宽度，不改变图像的纵横比。:0px; right:0px;z-index:1">
<img src="IMAGENAME.jpg" height="100%"/></
浏览 2提问于2012-04-18得票数 1
Drupal7模块‘图像风格’可以使图像效果，如调整大小，缩放，裁剪etc.But它是不够的。例如，原始图像大小为800x600，我可以将其缩放到400x300，然后我想在高度上添加白色背景，使其为400x400。如何才能达到这样的效果？
浏览 1提问于2012-04-20得票数 9
回答已采纳
我有一个动态JS代码，它可以在每次单击时更改div的背景图像。如何根据图像大小更改div的高度和宽度？下面是我的代码，以更好地理解我的问题： background: rgba(0, 0, 0, 0) url("..no-repeat scroll center center;
cursor
浏览 4提问于2015-08-14得票数 0
回答已采纳
我想知道是否可以指定一个div (例如div2)或图像的另一个源元素来适合其子元素的高度和宽度。此外，图像应该调整大小(保持纵横比)到DIV2的父级的全部可用空间(div1)。由于图像以及图像的纵横比、图像方向、高
浏览 2提问于2015-02-01得票数 0
3回答
我正在建立一个响应式的网站。在主页上，我有一些文章，其缩略图应显示在230px * 115px在全尺寸桌面输出。文章出版商将上传所有大小的图像，没有特别设置的纵横比。我目前只有代码来根据它的父容器来调整图像的大小。宽度将是它的父容器的100%，高度是自动的，并将根据原始图像<
浏览 3提问于2015-12-19得票数 0
是否可以将背景图像设置为100%的高度和100%的div？因此，如果div的纵横比发生变化，那么图像的纵横比也会发生变化。这不管用：这种图像的切割，而不是改变它的纵横比
浏览 2提问于2015-04-20得票数 0
回答已采纳
我真的很喜欢它，在短短3天的时间里，我获得了大量的HTML和CSS知识，并制作了一个导航栏和3个简单的框，其中包含了我们必须要做的图像/信息。
我没有意识到，分辨率不会延伸或适应其他屏幕。我在我的电脑上打开它，显示器是1080 p，所以我右边的文本框和中间框之间有很大的差距。我的横幅在顶部也是一样，它会在我的笔记本上看到，但不是我的屏幕
浏览 3提问于2017-05-04得票数 1
如果不使用JS，如何将所有这些效果与任何图像(大小大小、任意大小比)和任何容器大小(但固定的)结合起来。
如果图像的宽度/高度大于容器的宽度/高度，则图像<e
浏览 1提问于2015-07-29得票数 1
我想在固定大小(100px X 100px)的div中显示任何大小(不同宽度和高度)的图像，而不改变其纵横比。我还想将图像与div中的中心对齐。我做了它，但不同宽度和高度的图像(6)是不会出现在中心，除非我改变它的
浏览 1提问于2017-10-13得票数 7
回答已采纳
这是一个奇怪的问题，因为有很多方面我无法控制。我正在使用一个定制的图像旋转木马，其中的图像是一个背景图像，而包含的div有一个固定的宽度和高度(这些不能更改)，但是像背景位置和背景大小这样的东西我可以操作。
这个问题来自不同高宽比的图像。如
浏览 3提问于2015-05-17得票数 1
回答已采纳
3回答
IE7格式的图像高度
、、、
我一直试图创建一个可伸展的背景图像，通过绝对定位一个img标签，并给它一个100%的宽度和高度，这样： <div class="background">100x100" width="100%" height="100%" style="width: 100%; height: 100
浏览 1提问于2011-06-24得票数 1
回答已采纳
并且有一个用于使用权重的LinearLayout。在这些布局中，有ImageViews。ImageViews显示的图片偏离路线，但每个图像都有不同的纵横比。然后我想要使用ImageView的scaleType属性的图像的封面到ImageView的所有表面。但一切都没变。在Android Studio设计预览中，它可以工作，但当我们安装应用程序模拟器或真实设备时，什么都不会改变。你可
浏览 0提问于2019-05-09得票数 0
1回答
图像具有未知的尺寸和未知的纵横比(因为每个帖子都有不同的图像)。我如何使图像保持自己的纵横比，只是在较小的屏幕上缩放而不指定固定的高度？我被迫使用一个固定高度容器填充，但这只是扭曲图像，因为固定的高度。下
浏览 9提问于2022-07-04得票数 1
回答已采纳
19回答
我在许多帖子中看到过通过保持宽高比来调整图像大小。这些函数在调整大小时使用矩形的固定点(宽度和高度)。但是在我的项目中，我需要仅根据宽度来调整视图的大小，高度应该根据纵横比自动获取。
浏览 2提问于2011-10-04得票数 143
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
实时音视频
对象存储
即时通信 IM活动推荐
腾讯云开发者
