CSS：使div的宽度与高度成正比 [英] CSS: make div width proportional to height

问题描述

这是有点棘手的解释，但是：我想要一个响应的高度div（ height：100％）将缩放 width 与高度成比例（反之亦然）。

我知道，说明几乎相同的事情。

值得注意的是，已经使用：之前和：之后伪元素垂直对齐我想要缩放的框的内容按比例。

我真的很喜欢不必回复jQuery，只是因为会有一个内在的需求resize处理程序和通常更多的调试全部...但

解决方案

我一直在想一个纯粹的， css解决这个问题一会儿。我终于想出了一个解决方案使用ems，可以逐步增强使用vws：

请参阅codepen链接完整的工作演示和解释：

http://codepen.io/patrickkunka/pen/yxugb

简化版本：

  .parent {
 font-size：250px; // container of container 
 height：1em; 
} 
 
 .child {
 height：100％; 
 width：1em; // 100％of height 
} 
  

This is a little tricky to explain, but: I want a responsive-height div (height: 100%) that will scale the width proportional to the height (not vice versa).

I know of this method utilising a padding-top hack to make the height proportional to the width, but I need it to work the other way around. Having said that, I'm not hugely keen on the additional requirement of absolutely-positioned elements for the content in that method, so I realise I may well be asking for the moon on a stick here.

To help visualise, here is an image:

...and here is a jsFiddle, illustrating pretty much the same thing.

It is worth noting that I am already using the :before and :after pseudo-elements to vertically-align the content of the box I want to scale proportionally.

I would really, really enjoy not having to revert to jQuery, just because there's going to be an inherent requirement for resize handlers and generally more debugging all round... but if that's my only choice, then fiat.

解决方案

I've been wondering about a pure-css solution to this problem for a while. I finally came up with a solution using ems, which can be progressively enhanced using vws:

See codepen link for full working demo and explanation:

http://codepen.io/patrickkunka/pen/yxugb

Simplified version:

.parent {
  font-size: 250px; // height of container
  height: 1em;
}

.child {
  height: 100%;
  width: 1em; // 100% of height
}

这篇关于CSS：使div的宽度与高度成正比的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！