css之盒子自身宽高不变

引用\[1\]: 第二种方法是利用padding撑开盒子。通过设置padding-top为百分比，基于盒子的宽度来计算，从而实现盒子自身宽高不变。\[1\]例如，在CSS中可以使用以下代码实现：

.test-box-container{
  position: relative;
  padding-top: 40%;
  width: 100%;
}

.test-box{
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: red;
}

这样设置后，`.test-box`的宽高比例将保持不变，即使调整浏览器窗口大小，盒子的宽高比例也不会改变。

引用\[2\]: 另一种方法是使用CSS的`aspect-ratio`属性。这个属性可以直接设置盒子的宽高比例，从而实现盒子自身宽高不变。\[2\]例如，在CSS中可以使用以下代码实现：

.test-box{
  width: 100%;
  aspect-ratio: 8/1;
  background: red;
}

这样设置后，`.test-box`的宽高比例将保持为8:1，即使调整浏览器窗口大小，盒子的宽高比例也不会改变。此外，`aspect-ratio`属性还可以用于响应式设计，通过设置不同的宽高比例条件，可以在不同的屏幕尺寸下显示不同的样式。

引用\[3\]: 还有一种方法是使用`calc`函数来计算盒子的宽度。通过设置`width: calc(100% - 100px)`，可以实现盒子自身宽高不变。\[3\]例如，在CSS中可以使用以下代码实现：

.left{
  width: 100px;
  height: 100px;
  background: #b8e5ff;
  float: left;
}

.right{
  width: calc(100% - 100px);
  height: 100px;
  background: #d1ffd6;
  float: left;
}

这样设置后，`.right`盒子的宽度将自动适应父容器的宽度减去左侧盒子的宽度，从而实现盒子自身宽高不变。

综上所述，以上三种方法都可以实现盒子自身宽高不变的效果，具体选择哪种方法取决于实际需求和布局结构。
#### 引用[.reference_title]
- *1* *2* [css设置盒子宽高比固定，高度随着宽度发生变化](https://blog.csdn.net/weixin_44441196/article/details/124339024)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^koosearch_v1,239^v3^insert_chatgpt"}} ] [.reference_item]
- *3* [前端css实现左侧盒子宽度固定，右侧宽度自适应布局](https://blog.csdn.net/weixin_42554330/article/details/130417490)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^koosearch_v1,239^v3^insert_chatgpt"}} ] [.reference_item]
[ .reference_list ]