相关疑难解决方法(0)

我想创建一个div可以随着窗口宽度的变化而改变宽度/高度的东西.

是否有任何CSS3规则允许高度根据宽度改变,同时保持其宽高比？

我知道我可以通过JavaScript实现这一点,但我更喜欢只使用CSS.

是否可以设置与宽度相同的高度(比例1:1)？

例

+----------+
| body     |
| 1:3      |
|          |
| +------+ |
| | div  | |
| | 1:1  | |
| +------+ |
|          |
|          |
|          |
|          |
|          |
+----------+

CSS

div {
  width: 80%;
  height: same-as-width
}

我正在使用CSS,我想创建一个具有一定比率的盒子,无论盒子的大小如何都要保留.但是如果有更多内容,我希望盒子能够增长.

按顺序总结:

• 仅限CSS (如果可能)
• 保留给定的宽高比
• 如果有更多内容(比率)允许框增长

在那些我迄今为止尝试过的技术中,盒子的内容无法使盒子增长.相反,我唯一的选择是重叠或剪裁内容.

1. 填充率哈克
2. 基于视口的单位
3. 替换了Element Scale Hack

第一种和第三种方法占据了包装器内部的空间,并且使用绝对位置将内容置于其上方.由于内容是绝对定位的,因此将其从文档流中删除.因此,它无法扩展包裹元素.

第二种选择是使用固定高度,这也不允许内容超出它.

这是使用第二个选项的演示.(基于视口单元)

* {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>

我部分测试的其他方法:

• 物体定位
• Flexbox的

据我所知,Object-Fit仅影响被替换的元素.我无法通过此属性对我的div/p元素产生任何影响.

Flexbox对我的场景也不实用.根据我目前的知识水平,flexbox在这方面没有帮助.因为它主要是关于建立多个项目之间的关系.但我不确定.也许flexbox中有一些我还没有意识到的东西.

给定一个可以调整垂直和水平大小的父级 HTML div 元素，我希望子级 div 保持宽高比（例如 16:9），位于父级元素的中心并受其边缘限制。请不要JS。

单独使用 CSS 可以吗？（顶部“较宽”的父图像示例是邮筒，底部“较窄”是信箱。）

注意：在大多数情况下，父级将小于实际的浏览器视口，因此不要根据浏览器视口的宽度或高度来判断您的答案（例如）。这应该能够在任何给定的父/子尺寸下独立存在。