gpt4 book ai didi

javascript - 调整大小功能仅适用于一维

转载 作者:行者123 更新时间:2023-11-28 07:39:32 26 4
gpt4 key购买 nike

我有一个调整大小功能,可以使主 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()">

最佳答案

通过背景图片实现这一目标

如果您尝试使用背景图像来实现此目的,则可以使用 CSS background-size: contains; 的帮助。来自 Mozilla 网站上的关键字 contain :

This keyword specifies that the background image should be scaled to be as large as possible while ensuring both its dimensions are less than or equal to the corresponding dimensions of the background positioning area.

使用这种逻辑,您几乎可以根据窗口大小随意放大每个尺寸,然后让 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/无背景图像时

对于那些偶然发现这个答案并寻找与上面相同结果的人来说,这更适合,但使用普通的 div (可能带有背景颜色或其他东西)并且没有 CSS 的帮助: JSFiddle

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% 的方法,所以如果有人有解决窗口宽度问题的解决方案,我很想听听。

关于javascript - 调整大小功能仅适用于一维,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/28222078/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com