我有一个调整大小的功能,可以使主div调整为一致的比例。我原来根据工作正常的窗口宽度调整大小(功能中的第一个条件)。然后我添加了第二个条件,这样如果窗口太短,它会根据高度调整大小。此函数与onload一起正常工作。
当窗口变窄或变宽时,onresize适用于宽度,但高度条件仅在窗口缩短时才起作用。 。 。如果窗口被拖得更高,onresize事件似乎没有触发,我必须手动重新加载页面以便调整函数的大小。
<script>
function contentResizeHeight() {
var contentBG = document.getElementById("content");
var windowHeight = window.innerHeight;
var newHeight = Math.round(contentBG.offsetWidth * .6);
if ( windowHeight > newHeight ){
contentBG.style.height = newHeight + "px";
}
if ( windowHeight < newHeight ){
var newerWidth = windowHeight * 1.666666666666666666;
var newerHeight = Math.round(newerWidth * .6);
contentBG.style.height = newerHeight + "px";
contentBG.style.width = newerWidth + "px";
}
};
</script>
#content div由背景图片覆盖。因此,我们的想法是保持图像宽高比不变。
div#content{
background-repeat:no-repeat;
background-position:center 0px;
background-size: cover;
min-width:1024px;
max-width:1600px;
min-height:614px;
max-height:960px;
margin-right:auto;
margin-left:auto;
}
我在body标签中调用该函数
<body onload="contentResizeHeight()" onresize="contentResizeHeight()">
答案 0 :(得分:0)
如果您尝试使用背景图片来实现此功能,则可以使用CSS background-size: contain;
的帮助。来自关键字contain
的Mozilla网站:
此关键字指定应将背景图像缩放到尽可能大,同时确保其尺寸小于或等于背景定位区域的相应尺寸。
使用这个逻辑,你几乎可以根据窗口大小根据需要扩展每个维度,让CSS完成其余的工作。
function contentResizeHeight() {
var contentBG = document.getElementById("content"),
windowHeight = window.innerHeight,
windowWidth = window.innerWidth;
contentBG.style.height = windowHeight + "px";
contentBG.style.width = windowWidth + "px";
}
JSFiddle here看到它的实际效果。
对于偶然发现这个答案的人来说,更多的是找到与上面相同的结果,但是使用普通的div
(可能带有背景颜色或其他东西)并且没有来自CSS的帮助:{{3 }}
function contentResizeHeight() {
var contentBG = document.getElementById("content"),
windowHeight = window.innerHeight,
windowWidth = window.innerWidth,
contentHeight = contentBG.offsetHeight,
contentWidth = contentBG.offsetWidth,
newHeight = null,
newWidth = null;
if ( windowHeight > contentHeight ){
// 40 is the buffer zone for increasing the windows width quickly
if( contentWidth < windowWidth - 40 ){
newWidth = contentHeight * 1.666666666666666666;
if( newWidth >= windowWidth - 10 ){
newHeight = Math.round(newWidth * .6);
} else {
newHeight = windowHeight;
}
} else {
newHeight = Math.round(contentWidth * .6);
newWidth = windowWidth - 4;
}
} else if ( windowHeight < contentHeight ){
newHeight = windowHeight;
newWidth = newHeight * 1.666666666666666666;
}
contentBG.style.height = newHeight + "px";
contentBG.style.width = newWidth + "px";
}
这就是我设法让它以95%的速度运行的原因,所以如果有人能解决窗口宽度问题,我很乐意听到它。