0
点赞
收藏
分享

微信扫一扫

微服务-统一网关Gateway

张宏涛心理 2023-10-29 阅读 39
<span id="metric">width: 200px</span>
<input id="input" type="range" min="100" max="500" step="5" value="200">

<div class="container">
  <div id="box">aspect-ratio</div>
  <div id="box2">
    <div class="parent">
      <div class="padding_box">padding-top</div>
    </div>
  </div>
</div>
.container{
  display: flex;
}
#box {
  border: 1px solid black;
  width: 200px;
  background: yellow;
  aspect-ratio: 1/1;
}
#box2{
  width: 200px;
}
.parent{
  position:relative;
  width:100%;
  padding-top:100%;
  overflow: hidden;
}
.parent .padding_box{
  position:absolute;
  top:0;
  left:0;
  right:0;
  bottom:0;
  width:100%;
  background:green;
}

举报

相关推荐

0 条评论