使用CSS缩小内部html元素

Question

仅使用CSS就能缩小和增长子HTML元素。 下面是一个示例，我想看看其他人将如何处理此问题。 我已经看到了JQuery的解决方案，但是想知道有一种更简单的方法可以做到这一点。

<div class="your_custom_styling_here_for_resizing">
    <div style="width: 400px; height: 400px; display: flex;">
      <div style="height: 100px; background: #333333; flex: 1;"></div>
      <div style="background: #cccccc; flex: 1;"></div>
    </div>
</div>

Answer 1

一个更简单的解决方案是为这些样式创建一个类，而不是使用内联CSS和新样式，然后从jquery添加/删除/更改类。

Answer 2

您希望子元素缩放到父元素尺寸吗？ 如果这样做，请执行以下操作：

 .parent { border: 5px solid red; } .child { width: inherit; height: auto; background-color: blue; color: white; } 

 <div class="parent"> <div class="child">Expand or shrink your screen to see me scale to my parent</div> </div> 

}