首页
学习
活动
专区
工具
TVP
发布
社区首页 >问答首页 >如何使一个HTML元素与另一个元素按比例动态调整大小?

如何使一个HTML元素与另一个元素按比例动态调整大小?
EN

Stack Overflow用户
提问于 2018-06-28 06:20:01
回答 2查看 328关注 0票数 5

我是CSS的新手,我正在尝试创建一个难以理解的动态布局。我也发现很难找到答案;大多数答案似乎都集中在调整图像大小上,这一点我已经搞清楚了。

我有一个在画布上绘制的图像,带有一个滑块元素,可以用javascript调整图像/画布的大小。这部分已经完成了-不需要帮助。

我想要的是四个按钮,两个在图像的左侧,两个在顶部,它们在图像调整大小时将它们的相对大小保持为图像的一半。也就是说,当图像变大时,我希望左侧的两个按钮扩展,以便每个按钮都继续占据图像高度的一半(减去图像之间的空白),顶部的两个按钮也是如此。

我在下面的图表中列出了我想要实现的目标。

有没有一种纯CSS的方式可以做到这一点?我不喜欢使用javascript进行主动调整大小,但如果这是唯一的方法,我也想知道。谢谢!

图像设置为较小时所需的布局:

图像设置为较大时所需的布局:

(按钮间距的改变不是故意的,它应该说两次“按钮3”和“按钮4",而不是”按钮3“)

EN

回答 2

Stack Overflow用户

回答已采纳

发布于 2018-06-28 09:27:59

您可以使用CSS Grid执行此操作:

.container {
  display: inline-grid;
  grid-template:
    " .    btn3   btn4 " 50px
    "btn1 resize resize" 1fr
    "btn2 resize resize" 1fr
    /50px  1fr    1fr;
  grid-gap: 5px;
}

.resize { grid-area: resize; }
.btn1 { grid-area: btn1; }
.btn2 { grid-area: btn2; }
.btn3 { grid-area: btn3; }
.btn4 { grid-area: btn4; }

/* everything below this point is incidental */

*, *:before, *:after {
  box-sizing: inherit;
}

html {
  box-sizing: border-box;
}

button {
  border-radius: 4px;
  background: navy;
  color: white;
  border: 2px solid black;
}

.resize {
  min-height: 150px;
  min-width: 150px;
  resize: both;
  overflow: auto;
  background: black;
  color: white;
}

.vertical {
  /*writing-mode: sideways-lr; /* not yet well-supported */
}
<div class="container">
  <button class="btn1 vertical">Button 1</button>
  <button class="btn2 vertical">Button 2</button>
  <button class="btn3">Button 3</button>
  <button class="btn4">Button 3?</button>
  <div class="resize"></div>
</div>

我们使用grid-template定义了一个三行三列的网格。第一行和第一列的设置大小为50px,但第二行和第三列平均分配剩余的空闲空间。图像分布在四个东南单元格上。

票数 3
EN

Stack Overflow用户

发布于 2018-06-28 06:30:58

您可以使用flexbox执行此操作,并依赖其拉伸默认行为。

下面是一个简化的示例:

* {
  box-sizing: border-box;
}

.container {
  border: 1px solid red;
  display: inline-flex;
  flex-direction: column;
}

.btn1 {
  min-height: 50px;
  margin-left: 58px;
}

.btn1 button {
  border: 0;
  background: blue;
  color: #fff;
  width: 50%;
  height: 50px;
  border: 1px solid;
}

.btn2 {
  min-width: 50px;
}

.btn2 button {
  border: 0;
  background: blue;
  color: #fff;
  height: 50%;
  width: 100%;
  border: 1px solid;
}

.sub {
  display: flex;
  flex-direction: row;
}

.resize {
  min-height: 100px;
  min-width: 100px;
  resize: both;
  overflow: auto;
  border: 1px solid green;
}
<div class="container">
  <div class="btn1"><button>aa</button><button>bb</button></div>
  <div class="sub">
    <div class="btn2"><button>aa</button><button>bb</button></div>
    <div class="resize"></div>
  </div>
</div>

票数 3
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/51072208

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档