我正在使用CSS,想要创建一个具有特定长宽比的盒子,无论盒子的尺寸如何都保持不变。但是当里面有更多内容时,我还希望该盒子能够自动增长(保持比例)。
简而言之:
- 仅使用CSS(如果可能的话)
- 保持给定的长宽比
- 允许盒子随内容增长(并保持比例)
我已经尝试过的技术中,盒子的内容无法使盒子增长。 相反,我的唯一选择就是重叠或截取内容。
前两个方法分别占据包装器内部的空间,并使用绝对定位将内容放置在其上方。由于内容是绝对定位的,因此它从文档流中移除。 因此,它无法扩展包装元素。
第二个选项使用固定高度,这也不允许内容增长超出其范围。
* {margin: 0; padding: 0;}
div{
width: 50vmin; height: 50vmin;
font-size: 30px;
background: #ccc;
margin: auto;
padding: 3%;
}
<div>
<p>If you scale your window, you will see that the text does not fit into the box at some point, and therefore the text will be overlapping the box.<p>
</div>
我部分测试过的进一步方法:
- object-fit定位
- flexbox
据我所知,object-fit仅影响替换元素。 我无法在具有此属性的div/p元素上获得任何效果。
对于我的情况而言,Flexbox也不太实用。 根据我目前的了解水平,Flexbox在这里帮助不大。因为它主要是建立多个项目之间的关系。 但我对此并不确定。也许在flexbox中有些我尚未意识到的东西。
div { font-size: 4.5vmin; }
。 - Tamil Selvan C