在 webapp 中按比例调整 div 的大小

Question

我正在尝试创建一个可以调整大小的网络应用程序（就像我们在 OS 中调整 windows 大小一样），我知道我可以使用绝对位置和调整大小轻松地做到这一点属性，但我希望它按比例调整大小并有最大限制，我尝试并用谷歌搜索但没有 "precise" 答案，谢谢你的帮助 :p !

Answer 1

不知道这是否正是您想要的答案，但您可以使用最小高度、最大高度和相同的宽度，还可以使用 % 和 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 的大小

Resizing divs proportionally in a webapp

html

javascript

css

frontend