css如何实现高度固定宽度按比例显示？

Question

用padding-top百分比可以实现宽度固定高度按比例展示，现在的需求是高度是固定的，宽度如何按比例展示？

Answer 1

不太明白你要什么效果，宽度按比例显示直接设置相对父元素的百分比就行了吧，或者使用flex布局。你前面说的使用padding-top实现的高度按比例显示，应该是利用了padding的百分比设置是相对于父元素宽度来设置的，如果这样，你的问题就直接使用宽度百分比就能搞定了

Answer 2

已找到解决方案：见这里 ==》https://www.cnblogs.com/beile...

Answer 3

有一种方式你可以尝试一下

比如你想实现宽高比为1:3的容器，你可以做一张1*3像素（越小越好）的图片，然后把高度设置为你想要的固定高度，那么宽度也会自适应，外面的容器你可以设置为浮动或者inline-block

Answer 4

这个感觉就是都设置max-height max-width这样就会在显示所有的情况下，自适应。

你说说的高度固定，那么你就可以写死height，不去设置宽度。这个情况就会出现宽度超出去或者不够。如果只看中心点。可以考虑left:50%;transtion: tranlstae(-50%)拉回来。