如何根据缩放调整 div 的大小？

Question

我有以下用户界面。

缩放为 100% 时一切正常。 但是当用户放大 UI 时会受到干扰，如下所示：

div 中的卡片不会调整大小。 我希望所有卡片都采用名为 E 的 div 的宽度。将卡片宽度设置为 100% 会给其他div带来问题。 由于 div 比 div E 大，卡片会被拉伸。

div E 显示一次卡片。 水平滚动上可能有多个可见的卡片。 同样，div R 一次显示 3 张卡。 它可能包含更多卡片。 缩放时，可见卡片的某些内容隐藏在div E 中。同样， div R 中的 3 张卡片中的最后一张也被部分隐藏。

这是codepen链接和代码下方：

 #div_A { background-color: #B14C08; padding: 5px; font-weight: 600; color: white; font-size: 13px; } #div_B { background-color: #157668; padding: 5px; font-weight: 600; color: white; font-size: 13px; } #div_C { background-color: #E61B00; padding: 5px; font-weight: 600; color: white; font-size: 13px; } #div_D { background-color: #0078D4; padding: 5px; font-weight: 600; color: white; font-size: 13px; } #div_E { background-color: #0D283D; padding: 5px; font-weight: 600; color: white; font-size: 13px; }.holder { min-height: 240px; padding: 0 2px 0 2px; }.holder.card_holder { padding: 0; max-width: 290px; }.holder.xyz { overflow-x: auto; min-height: 240px; }.shortdetail { display: flex; } *, *:before, *:after { box-sizing: border-box; }.content { width: 287px; position: relative; animation: animatop 0.9s cubic-bezier(0.425, 1.14, 0.47, 1.125) forwards; }.card { width: 100%; height: 80px; padding: 0px; border: 0px; border-top-left-radius: 0px; border-top-right-radius: 0px; background-color: white; position: relative; overflow: hidden; }.shortdetail { margin: 5px; flex-direction: row; z-index: 2; position: relative; }.profileinfo { width: 100%; margin: 0px 10px; color: #5a5a5a; line-height: 1.2; font-style: initial; }.profileinfo.row { margin: 0; }.profileinfo.col-8, .col-4 { padding: 0; }.profileinfo label { margin-bottom: 0px; }.name { font-size: 13px; font-weight: 600; }

 <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css"> <div class="col-8"> <div class="row rounded-top" style="background-color:#405755; color: white; font-weight: 600;"> <span class="col" style="padding: 5px; padding-left: 8px; font-size: 14px;">List</span> </div> <div class="row border border-primary" style="padding: 5px 0 5px 0;"> <div class="row" style="margin: 0px; margin-bottom:3px; width: 100%;"> <div class="col-3 holder"> <div class="rounded-top" id="div_A"> Div A <button>Prev</button> <button>Next</button> </div> <div class="d-flex flex-row xyz"> <div class="card_holder"> <div class="content"> <div class="card" style="background-color: #F8F6F4"> <div class="shortdetail"> <div class="profileinfo"> <label class="name">Random Name</label><br /> <label style="font-size: 12px;">Dummy</label> <div class="row" style="font-size: 12px;"> <span class="col-8">dummy</span> <span class="col-4 text-right">dummy</span> </div> </div> </div> </div> </div> </div> <div class="card_holder"> <div class="content"> <div class="card" style="background-color: #F8F6F4"> <div class="shortdetail"> <div class="profileinfo"> <label class="name">Random Name</label><br /> <label style="font-size: 12px;">Dummy</label> <div class="row" style="font-size: 12px;"> <span class="col-8">dummy</span> <span class="col-4 text-right">dummy</span> </div> </div> </div> </div> </div> </div> </div> </div> <div class="col-9 holder"> <div class="rounded-top" id="div_B"> Div B </div> <div class="d-flex flex-row xyz"> <div class="card_holder" style="margin-right: 20px"> <div class="content"> <div class="card" style="background-color: #F8F6F4"> <div class="shortdetail"> <div class="profileinfo"> <label class="name">Random Name</label><br /> <label style="font-size: 12px;">Dummy</label> <div class="row" style="font-size: 12px;"> <span class="col-8">dummy</span> <span class="col-4 text-right">dummy</span> </div> </div> </div> </div> </div> </div> <div class="card_holder" style="margin-right: 20px"> <div class="content"> <div class="card" style="background-color: #F8F6F4"> <div class="shortdetail"> <div class="profileinfo"> <label class="name">Random Name</label><br /> <label style="font-size: 12px;">Dummy</label> <div class="row" style="font-size: 12px;"> <span class="col-8">dummy</span> <span class="col-4 text-right">dummy</span> </div> </div> </div> </div> </div> </div> <div class="card_holder" style="margin-right: 20px"> <div class="content"> <div class="card" style="background-color: #F8F6F4"> <div class="shortdetail"> <div class="profileinfo"> <label class="name">Random Name</label><br /> <label style="font-size: 12px;">Dummy</label> <div class="row" style="font-size: 12px;"> <span class="col-8">dummy</span> <span class="col-4 text-right">dummy</span> </div> </div> </div> </div> </div> </div> <div class="card_holder"> <div class="content"> <div class="card" style="background-color: #F8F6F4"> <div class="shortdetail"> <div class="profileinfo"> <label class="name">Random Name</label><br /> <label style="font-size: 12px;">Dummy</label> <div class="row" style="font-size: 12px;"> <span class="col-8">dummy</span> <span class="col-4 text-right">dummy</span> </div> </div> </div> </div> </div> </div> </div> </div> <div class="col-3 holder"> <div class="rounded-top" id="div_C"> Div C </div> <div class="d-flex flex-row xyz"> <div class="card_holder"> <div class="content"> <div class="card" style="background-color: #F8F6F4"> <div class="shortdetail"> <div class="profileinfo"> <label class="name">Random Name</label><br /> <label style="font-size: 12px;">Dummy</label> <div class="row" style="font-size: 12px;"> <span class="col-8">dummy</span> <span class="col-4 text-right">dummy</span> </div> </div> </div> </div> </div> </div> </div> </div> <div class="col-6 holder"> <div class="rounded-top" id="div_D"> Div D </div> <div class="d-flex flex-row xyz"> <div class="card_holder" style="margin-right: 20px"> <div class="content"> <div class="card" style="background-color: #F8F6F4"> <div class="shortdetail"> <div class="profileinfo"> <label class="name">Random Name</label><br /> <label style="font-size: 12px;">Dummy</label> <div class="row" style="font-size: 12px;"> <span class="col-8">dummy</span> <span class="col-4 text-right">dummy</span> </div> </div> </div> </div> </div> </div> <div class="card_holder" style="margin-right: 20px"> <div class="content"> <div class="card" style="background-color: #F8F6F4"> <div class="shortdetail"> <div class="profileinfo"> <label class="name">Random Name</label><br /> <label style="font-size: 12px;">Dummy</label> <div class="row" style="font-size: 12px;"> <span class="col-8">dummy</span> <span class="col-4 text-right">dummy</span> </div> </div> </div> </div> </div> </div> <div class="card_holder" style="margin-right: 20px"> <div class="content"> <div class="card" style="background-color: #F8F6F4"> <div class="shortdetail"> <div class="profileinfo"> <label class="name">Random Name</label><br /> <label style="font-size: 12px;">Dummy</label> <div class="row" style="font-size: 12px;"> <span class="col-8">dummy</span> <span class="col-4 text-right">dummy</span> </div> </div> </div> </div> </div> </div> </div> </div> <div class="col-3 holder"> <div class="rounded-top" id="div_E"> Div E </div> <div class="d-flex flex-row xyz"> <div class="card_holder"> <div class="content"> <div class="card" style="background-color: #F8F6F4"> <div class="shortdetail"> <div class="profileinfo"> <label class="name">Random Name</label><br /> <label style="font-size: 12px;">Dummy</label> <div class="row" style="font-size: 12px;"> <span class="col-8">dummy</span> <span class="col-4 text-right">dummy</span> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div>

Answer 1

不要用 px 固定宽度或高度，试试用 % 看看