如何使div元素自动调整尺寸以保持宽高比? [英] How to make div element auto-resize maintaining aspect ratio?

问题描述

我正在尝试在屏幕中居中放置 div .当该div适合可用窗口空间时，它应具有特定的 width 和 height ，但当可用窗口空间不足时，它应缩小以适合其大小，保持其原始长宽比.

I'm trying to have a div centered in the screen. This div should have a specific width and height when it fits in the available window space, but it should shrink to fit when the available window space is not enough, but also, maintaining its original aspect ratio.

我一直在研究许多示例，这些示例适用于减小 width 的宽度，但是没有一个适用于 width 和 height 更改的示例在窗口大小中.

I've been looking at lots of examples that work for a decreasing width, but none that work for both width and height changes in the window size.

这是我当前的CSS:

* {
    border: 0;
    padding: 0;
    margin: 0;
}
.stage_wrapper {
    width: 100vw;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    background: gray;
}
.stage {
    width: 960px;
    height: 540px;
    max-width: 90%;
    max-height: 90%;
    display: flex;
    justify-content: center;
    align-items: center;
    background: chocolate;
    object-fit: contain; /* I know this is for images, it's an example of what I'm looking for */
}

而且，我当前的HTML:

And, my current HTML:

<div class="stage_wrapper">
    <div class="stage">
        <p>Some text</p>
    </div>
</div>

这显示了居中的 div ，其固定的 width 为960px，固定的 height 为540px.绝对不能大于此值.

This is showing a centered div that has a fixed width of 960px and a fixed height of 540px. It should never be bigger than that.

然后，如果我将窗口的大小更改为小于此宽度的 width 或 height ，则 div 元素将成功缩小-除了不保持原始的宽高比，这就是我想要的.我希望它能够响应 width 和 height 的变化.

Then, if I change the size of my window to have a smaller width or height than that, the div element is successfuly shrinking - except it is not maintaining the original aspect ratio, and that is what I'm looking for. I want it to respond to changes in both width and height.

这有可能吗?

推荐答案

这里是使用视口单元和 clamp()的想法.测试屏幕宽度是大于还是小于高度(考虑比例)，这是一种 if 的方法，然后根据结果进行计算.

Here is an idea using viewport unit and clamp(). It's a kind of if else to test if the width of the screen is bigger or smaller than the height (considering the ratio) and based on the result we do the calculation.

在下面的代码中，有两个变量 cv 和 ch ，其中只有一个等于 1

In the code below with have two variables cv and ch and only one of them will be equal to 1

• 如果它是 cv ，则宽度较大，因此我们将高度设置为 cv ，并且宽度将基于该高度，因此在逻辑上 cv/ratio

• If it's cv then the width is bigger so we set the height to cv and the width will be based on that height so logically cv/ratio

如果它是 ch ，则高度较大，因此我们将宽度设置为 cv ，并且高度将基于该宽度，因此在逻辑上 ch/ratio

If it's ch then the height is bigger so we set the width to cv and the height will be based on that width so logically ch/ratio

在 clamp()中，我使用的是 1vh / 1vw ，我乘以 90 您的 90％具有 90vh / 90vw

In the clamp() I am using 1vh/1vw that I multiple by 90 which is equivalent to your 90% to have 90vh/90vw

body {
  height: 100vh;
  margin: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  background: gray;
}


.stage {
  --r: calc(960 / 540);
  
  --cv: clamp(0px,(100vw - 100vh*var(--r))*10000,1vh);
  --ch: clamp(0px,(100vh*var(--r) - 100vw)*10000,1vw);

  height: calc((var(--cv) + var(--ch)/var(--r)) * 90 );
  width:  calc((var(--ch) + var(--cv)*var(--r)) * 90 );
  
  max-width: 960px;
  max-height: 540px; /* OR calc(960px/var(--r)) */
  
  display: flex;
  justify-content: center;
  align-items: center;
  
  
  background: 
    /* this gradient is a proof that the ratio is maintained since the angle is fixed */
    linear-gradient(30deg,red 50%,transparent 50%),
    chocolate;
}

<div class="stage">
  <p>Some text</p>
</div>

理论上，夹具可以简化为:

In theory the clamp can be simplified to:

--cv: clamp(0px,(1vw - 1vh*var(--r)),1vh);
--ch: clamp(0px,(1vh*var(--r) - 1vw),1vw);

但是为了避免任何舍入问题并且不落入像 0.x 这样的值，我认为有一个大的值可以确保将其始终固定为 1

But to avoid any rounding issue and to not fall into values like 0.x I consider a big value to make sure it will always be clamped to 1 if positive

更新

Firefox似乎有一个错误，因此这是同一代码的另一个版本:

It seems there is a bug with Firefox so here is another version of the same code:

body {
  height: 100vh;
  margin: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  background: gray;
}


.stage {
  --r: calc(960 / 540);
  
  --cv: clamp(0px,(100vw - 100vh*var(--r))*100,90vh);
  --ch: clamp(0px,(100vh*var(--r) - 100vw)*100,90vw);

  height: calc((var(--cv) + var(--ch)/var(--r)) );
  width:  calc((var(--ch) + var(--cv)*var(--r)) );
  
  max-width: 960px;
  max-height: 540px; /* OR calc(960px/var(--r)) */
  
  display: flex;
  justify-content: center;
  align-items: center;
  
  
  background: 
    /* this gradient is a proof that the ratio is maintained since the angle is fixed */
    linear-gradient(30deg,red 50%,transparent 50%),
    chocolate;
}

<div class="stage">
  <p>Some text</p>
</div>

很快，我们可以简化以上所有操作，并使用 aspect-ratio ^ref 属性:

Shortly we can simplify all the above and use the aspect-ratio ^ref property:

body {
  height: 100vh;
  margin: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  background: gray;
}


.stage {
  --r: 960 / 540;

  aspect-ratio: var(--r);
  width:min(90%, min(960px, 90vh*(var(--r))));
  
  display: flex;
  justify-content: center;
  align-items: center;
  
  
  background: 
    /* this gradient is a proof that the ratio is maintained since the angle is fixed */
    linear-gradient(30deg,red 50%,transparent 50%),
    chocolate;
}

<div class="stage">
  <p>Some text</p>
</div>

这篇关于如何使div元素自动调整尺寸以保持宽高比?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！