如何根据浏览器的尺寸自动沿div宽度调整div高度
Posted
技术标签:
【中文标题】如何根据浏览器的尺寸自动沿div宽度调整div高度【英文标题】:How to adjust div height automatically along the div width according to resiging of browser 【发布时间】:2013-04-09 08:58:01 【问题描述】:我正在努力使网站具有响应性。我已经为所有 div 使用了自动高度。但是,对于特定的 div,我必须为浏览器的所有大小使用固定高度。但是,我不想在每个尺寸的设备/浏览器的媒体查询中手动放置高度,而是想自动/动态地进行。可能是 javascript/jQuery 可以做到。但是,我对 javascript/jQuery 了解不多。所以,我需要你的帮助。我的容器 div 的最大宽度:1280px;我有一个名为“#artwork”的子 div,其初始尺寸为:1065*695px。以 base 作为容器 div 的最大宽度和 #artwork div 的初始高度,我想为每次调整浏览器大小时为 #artwork 提供自动高度。
我不能给出“#artwork”高度:自动,因为在那个“#artwork”div 中有很多大图像。但是,通过javascript,只有一张图片正常显示,通过向下滚动,人们可以一张一张地看到下一张图片。如果我将 height: auto 或使用 minimum-height 设置为“#artwork”,则会显示所有图像。我已经通过媒体查询将“艺术品” div 高度手动放在不同类型的 css 文件中。但是,我想自动执行此操作,因此该比例非常适合每台设备上每种尺寸的浏览器。
以下是页面示例: [删除死链接]
#container
max-width: 1280px;
margin: 0 auto;
padding: 0;
overflow: hidden;
font-family: GandhiSansBold;
position: relative;
#artwork
/*width: 1065px;*/
width: 83.203%;
height: 695px;
margin: 0;
float: left;
overflow: hidden;
margin-bottom: 10px;
请确保,如果浏览器尺寸过大,#artwork 高度在任何情况下都不能通过自动调整大小超过 height:695px。
【问题讨论】:
那么,问题出在哪里?浏览器调整大小时是否需要#artwork 元素的高度/宽度? 是的,宽度已经根据浏览器的大小来定义,因为我使用百分比作为宽度。现在,当我重新调整浏览器大小时,我只需要高度。但是,高度无论如何不能超过高度:695px。 在下面查看我的答案,您可以调整浏览器的宽度/高度。您需要将 max-height:695px 添加到#artwork
.
CSS maintain div aspect ratio的可能重复
【参考方案1】:
http://f6design.com/journal/2011/10/18/responsive-elements-that-retain-their-aspect-ratio/
问题归结为在流体设计中保持纵横比。这条道路已经走过了很好的道路,并且存在许多漂亮的解决方案。我在上面列出一个。如果它也解决了嵌套 div 元素的问题,请告诉我。
【讨论】:
如果我使用 #artwork /*width: 1065px;*/ width: 83.203%; 这对我不起作用高度:0;边距:0;向左飘浮;溢出:隐藏;边距底部:10px;底部填充:50%; 【参考方案2】:调整大小时需要计算浏览器的新高度,然后为图像设置新高度:
var TO = false;
var resizeEvent = 'onorientationchange' in window ? 'orientationchange' : 'resize';
$(window).bind(resizeEvent, function()
TO && clearTimeout(TO);
TO = setTimeout(resizeImage, 200);
);
function resizeImage()
// browser resized, we count new width/height of browser after resizing
var height = window.innerHeight || $(window).height();
// var width = window.innerWidth || $(window).width();
// you need to change here #artwork height
var imgHeightInPercent = 30; // browser height is 100%
var desiredHeight = (height * imgHeightInPercent) / 100;
// finally we changed #artwork height
$('#artwork').height(desiredHeight);
【讨论】:
实际上,我对javascript/jQuery 的了解很少。在您的链接中,提供了示例代码。我不明白我该如何实施。另外,我不需要所有的div。我已经通过定义 height: auto 和 width: %; 来完成所有 div 的操作。我只需要#artwork div 的高度。能否请您提供仅用于#artwork div 调整高度的代码?【参考方案3】:最好的方法是使用 CSS 和百分比值,但现在我们将使用 jQuery。
这是一个使用 jQuery 并处理 resize 事件的示例:
(function()
var _viewport = $(window),
_event = 'onorientationchange' in window ? 'orientationchange' : 'resize';
//add a namespace to event
_event += ".boxsize";
//creates the event handler by namespace
_viewport
.off(_event)
.on(_event, fnResizer);
function fnResizer (e)
var gap = 40,
winWidth = _viewport.width(),
winHeight = _viewport.height(),
//add your calculations
boxWidth = winWidth - gap,
boxHeight = winHeight - gap;
//sets the new size of the boxes
$('#artwork, #container').css(
"width": boxWidth,
"height": boxHeight
);
());
html:
<div id="container">
<div id="artwork"></div>
</div>
【讨论】:
实际上,我对javascript/jQuery 的了解很少。在您的代码中,给出了示例代码。我不明白我该如何实施。另外,我不需要所有的div。我已经通过定义 height: auto 和 width: %; 来完成所有 div 的操作。我只需要#artwork div 的高度。能否请您提供仅用于#artwork div 调整高度的代码?$(window).resize(function() var yourComputedHeight = 100; $('#artwork').height(yourComputedHeight); );
以上是关于如何根据浏览器的尺寸自动沿div宽度调整div高度的主要内容,如果未能解决你的问题,请参考以下文章