具有动态高度

Question

我创建了一个页面，其中有两张图片彼此相邻，每张图片的宽度为50％。左边是300x900，右边是300x1800。我需要将高度限制在不超过900，所以我在更高的图片（右侧）上放置了一个滚动条。这两个图片都是使用浏览器窗口动态缩放，但滚动高度保持在900.如果浏览器窗口按比例缩小，我需要它像图片一样动态缩小高度。我希望滚动条将高度尺度与左边的图片（最大高度为900的图片）进行匹配。这可能吗？谢谢你的帮助！

Answer 1

是的，这是可能的。

有很多解决方案。 一种方法是设置内部较高pic的div的最大宽度。（您可以设置为％） 其他方式是使用媒体查询 您可以使用javascript来更改高度等的css属性。

对于特定答案，您必须显示一些代码。

这是javascript代码

windows.onresize=resizeImage;

function resizeImage{
    document.getElementById('Scroll').style.height=document.querySelector('.imageframe-1').offsetHeight+'px';
    }

此代码获取包含图像1的跨度的高度，并将其提供给#Scroll div

Answer 2

感谢大家的帮助！这是我想出的答案和它的工作！ （134.7％是我需要链接到“滚动条”图片的图片的宽高比。#Scroll {height: auto; max-height: 0px; padding-bottom: 134.7% ; overflow-y: auto}