如何通过视口宽度的尺寸减小将 a 从最大高度缩小到最小高度? [英] How to shrink a from a max-height to a min-height over the size decrease of the viewport width?

问题描述

如果我有一个 body 元素并且我缩小了屏幕尺寸，它是 1:1 的比例.
如果我有一个宽度为 50% 的 body 标签.它的比例为 1:1.视口的每一个像素减少都会直接影响元素的宽度.

如果我并排放置 2 个元素.我想让第一个元素 (.left) 从 400 像素的宽度开始，屏幕宽度为 1300 像素，但在屏幕增加到 1920 像素的过程中总共增加 100 像素.
第二个元素 (.right) 将填充剩余的空间并按照屏幕的相应速率 +/- .left
的当前宽度减小.right
1300px -> 1920px
400px -> 500px
.left
宽度:100%
我知道这行不通，但这是我目前得到的代码.

.full{背景颜色:浅蓝色；宽度:100%；高度:50px；}.一半{宽度:50%；高度:50px；背景颜色:灰色；}#柔性{显示:弹性；}.对{最大宽度:500px；最小宽度:400px；高度:50px；背景颜色:浅绿色；宽度:70%；}.剩下{高度:50px；背景颜色:浅粉色；宽度:30%；}

<div class="full"></div><div class="half"></div><div id="flex"><div class="left"></div><div class="right"></div>

解决方案

我假设问题中的措辞是必需的，即左侧元素的最小值为 400px，最大值为 500px 和是从主体宽度 1300 像素开始到 1920 像素停止的最小值开始增加尺寸.

left 因此需要设置为 min-width: 400px 和 max-width: 500px

我们需要计算在给定的起始和结束主体宽度值之间增加 100 像素的宽度.这个公式是:

s + (i/d) * (a - b)

哪里s = 左元素的起始宽度 (400)i = 左宽度增加 (100)d = 开始和结束身体宽度之间的差异 (1620)a = 现在的实际主体宽度 (100%)b = 起始主体宽度 (1300)

正确的元素是占用剩余空间所以需要给flex: auto;

在此代码段中，使用 CSS 变量设置了各种尺寸，以便更轻松地更改它们.

.full{背景颜色:浅蓝色；宽度:100%；高度:50px；}.一半{宽度:50%；高度:50px；背景颜色:灰色；}#柔性{显示:弹性；}.对{高度:50px；背景颜色:浅绿色；弹性:自动；}.剩下{高度:50px；背景颜色:浅粉色；/* 将这 4 个变量设置为您想要的 */--startb: 1300;/* 身体的宽度，之后左边开始变大 */--endb: 1920;/* 身体的宽度，之后 left 停止变大 */--startleft: 400;/* 左元素的起始(因此最小)宽度 */--incw: 100;/* 达到结束体宽度时左侧宽度的增加 *//* 我们计算了一些临时值只是为了更容易看到正在发生的事情 */--startbw: calc(var(--startb) * 1px);--endbw: calc(var(--endb) * 1px);--incb: calc(var(--endb) - var(--startb));--startw: calc(var(--startleft) * 1px);宽度: calc(var(--startw) + calc(calc(var(--incw)/var(--incb)) * calc(100% - var(--startbw))));最小宽度:var(--startw);最大宽度:calc(var(--startw) + calc(var(--incw) * 1px));}

<div class="full"></div><div class="half"></div><div id="flex"><div class="left"></div><div class="right"></div>

If I have a body element and I decrease screen size, it is a 1:1 ratio.
If I have an body tag at width 50%. its a 1:1 ratio. Every pixel decrease of the viewport directly effects the width of element.

If I have 2 Elements side by side. I want to have the first element (.left) start at a width of 400px, at a screen width of 1300px, but increase a total of 100px over the course of the screen increase to 1920px.
The second element (.right) will fill the rest of the space and decrease at the according rate of the screen +/- the current width of .left
.right
1300px -> 1920px
400px -> 500px
.left
width:100%
I know this doesnt work but this is the code I've got so far.

.full{
background-color: lightblue;
width:100%;
height:50px;
}
.half{
width:50%;
height:50px;
background-color:grey;
}
#flex{
display:flex;
}
.right{
max-width:500px;
min-width:400px;
height:50px;
background-color:lightgreen;
width:70%;
}
.left{
height:50px;
background-color:lightpink;
width:30%;
}

<div class="full"></div>
<div class="half"></div>
<div id="flex">
    <div class="left"></div>
    <div class="right"></div>
</div>

解决方案

I'm assuming the wording in the question is what is required, i.e. the left element is to have a min value of 400px, a max value of 500px and is to increase in size from the min starting at body width 1300px and stopping at 1920px.

left therefore needs to be set to have a min-width: 400px and max-width: 500px

We need to calculate what the width will be to increase by 100px between the given start and end body width values. The formula for this is:

s + (i / d) * (a - b)

where s = starting width of left element (400) i = increase in left width (100) d = difference between start and end body widths (1620) a = actual body width now (100%) b = starting body width (1300)

The right element is to take up the remaining space so needs to be given flex: auto;

In this snippet the various dimensions have been set using CSS variables so as to make it easier to change them.

.full{
  background-color: lightblue;
  width: 100%;
  height: 50px;
}
.half{
  width: 50%;
  height: 50px;
  background-color:grey;
}
#flex{
  display: flex;
}
.right{
  height: 50px;
  background-color: lightgreen;
  flex: auto;
}
.left{
  height:50px;
  background-color:lightpink;

  /* SET THESE 4 VARIABLES TO WHAT YOU WANT */
  --startb: 1300; /* width of the body after which left starts to get bigger */
  --endb: 1920; /* width of the body after which left stops getting bigger */
  --startleft: 400; /* the start (hence minimum) width of the left element */
  --incw: 100; /* the increase in the left's width when have reached the end body width */
  
  /* we calculate some interim values just to make it a bit easier to see what's happening */
  --startbw: calc(var(--startb) * 1px);
  --endbw: calc(var(--endb) * 1px);
  --incb: calc(var(--endb) - var(--startb));
  --startw: calc(var(--startleft) * 1px);
  
  width: calc(var(--startw) + calc(calc(var(--incw) / var(--incb)) * calc(100% - var(--startbw))));
  min-width: var(--startw);
  max-width: calc(var(--startw) + calc(var(--incw) * 1px));
}

<div class="full"></div>
<div class="half"></div>
<div id="flex">
    <div class="left"></div>
    <div class="right"></div>
</div>

这篇关于如何通过视口宽度的尺寸减小将 a 从最大高度缩小到最小高度?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！