Question

我正在尝试创建一个可以调整大小的webapp（就像我们在操作系统中调整窗口大小一样），我知道我可以使用绝对位置和调整大小两个属性轻松地执行此操作，但我希望它可以调整大小按比例，并有一个最大限制，我尝试和谷歌搜索，但没有“精确”的答案，谢谢你的任何帮助：p！

Answer 1

不知道这是否正是您所追求的答案，但您可以使用min-height，max-height和相同的宽度，并使用％与vw保持比率：

<强> HTML：

<div id="wrapper">
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
</div>

<强> CSS：

body{
    width: 100%;
    height: 100%;   
    margin 0;
    padding 0;
}

#wrapper{
    width: 100vw;
    height: 100vh;
    background-color: #ccc;
}

.box {
    width:20%;
    height:20vw;
    min-width:100px;
    min-height: 100px;
    max-width: 200px;
    max-height: 200px;
    margin:1%;
    background:DodgerBlue ;
    float:left;
}

<强> DEMO

Answer 2

好的我想我现在可能会得到你的意思，你可以使用jQuery UI代替CSS：

<强> HTML：

<div id="re_size_me">text in div</div>

<强> CSS：

#re_size_me{
    border: 2px solid;
    padding: 20px; 
    width: 100px;
    height: 100px;
    overflow: auto;
}

<强>的Javascript / jQuery的：

  $(function() {
    $( "#re_size_me" ).resizable({
      aspectRatio: 1 / 1,
       maxHeight: 300,
      maxWidth: 300,
      minHeight: 50,
      minWidth: 50
    });
  });

<强> DEMO

您可以在此处阅读更多内容：https://jqueryui.com/resizable/

在webapp中按比例调整div

2 个答案: