主页 / 问题 / 1562515
Accepted
eccs0103
Asked:2024-01-21 07:20:10 +0000 UTC2024-01-21 07:20:10 +0000 UTC

调整子元素的大小，同时居中并保持比例

  • 772

描述

vmin我需要的与 和非常相似vmax，但不一样。
例如，它返回最小屏幕vmin尺寸的百分比（更准确地说，视口，无法准确翻译）。我需要返回父尺寸 中最小尺寸的百分比的东西。

问题

有没有不用拐杖的路？
嗯……最后的选择是有没有拐杖的办法？

此外

最小的例子

div#parent {
  position: fixed;
  inset: 0;
  display: flex;
  place-content: center;
}

div#child {
  aspect-ratio: 1;
  max-width: 100%;
  max-height: 100%;
}
<div id="parent" style="background-color: rgb(200, 200, 200);">
  <div id="child" style="background-color: rgb(100, 100, 100);"> </div>
</div>

css

2 个回答

  1. Best Answer

    据我了解，您需要实现类似于 的行为object-fit: contain，只是不是针对图片，而是针对块。

    我将提供一个具有绝对定位和自动缩进的选项：

    div#parent {
  position: fixed;
  inset: 0;
  /* For example only --> */ overflow: hidden; resize: both;
}

div#child {
  position: absolute;
  left: 0; right: 0;
  top: 0; bottom: 0;
  margin: auto;
  max-height: 100%;
  aspect-ratio: 1 / 1;
  /* For example only --> */ box-shadow: inset 0 0 0 3px #f00;
}
    <div id="parent" style="background-color: rgb(200, 200, 200);">
  <div id="child" style="background-color: rgb(100, 100, 100);"> </div>
</div>

    要查看实际效果，请通过抓住右下角的父块来调整其大小。

    • 3

  2. 这是我的一段错误的代码。用于最小侧的缩放，并从风格的变化中随心所欲地跳舞。在那里你可以得到你需要的%。这些数字似乎是专门针对我的项目的，您可以删除它们或保留它们，我不记得为什么这些数字似乎对价值的规模负责。把窗户换成你想要的任何人，就会有幸福。

        var world_size = ()=>{
                          var  SIZE_PX
                           if(window.innerHeight*1.243 > window.innerWidth) SIZE_PX = ~~parseInt(window.innerWidth*0.805*0.97)/8
                            else                                            SIZE_PX = ~~parseInt(window.innerHeight*0.97)/8

                             document.body.style.setProperty('--world_size',  SIZE_PX+'px')    
    }
                         window.onload = world_size
                         window.addEventListener('resize',  world_size, true);

    用过这样的东西

    chat_box {
    height: calc(var(--world_size)/2.2); 
     width: calc(var(--world_size)/2.2);
}
    • 0

相关问题