html图片高度固定宽度缩放,CSS实现容器高度随宽度固定比例缩放的解决方案

今天做做图表过程中遇到一个问题，我的容器宽度都是使用Bootstrap那一套栅格系统，做出来之后在自己电脑上基本没什么大问题，但是放到老板的电脑屏幕上，却变得一长条的，原因就在于我把容器的高度设定为固定的300px，然而在屏幕分辨率高(或者说像素密度高)的屏幕上300px的高度相对于按50%的宽度，就成了一个横条了。

突然我就想，是不是可以让这个容器的宽高比固定一下呢？开完会后开始请教度娘，度娘里的众多结果中，无非就是那么四种方法，下面就来介绍以下这些方法以及我使用后的一些改进。

使用一个隐藏的图片来实现

这个方法我比较推荐，因为不需要考虑任何兼容性，PC移动完美运行。除了增加一个DOM结构，但是相对于一个页面成百上千的代码来说，不值一提。

我们知道，div容器如果不给定高度，它的高度会随着容器内部的元素变化而撑大，这个时候，我们在容器内部添加一张符合我们宽高比的图片，给图片设置宽度100%；高度auto。不管我们的父容器如何变化，内部的img宽度都是100%，图片是会严格按照比例自动缩放的，相应的，我们内部的子容器的盖度也就会按照比例缩放了：