使高度响应/让它保持比例

Question

目前我正在研究一个响应式图像滑块，但在使滑块完全响应之前，我需要知道一些事情，那就是我如何编写自动调整到宽度的代码（例如，它保持比例，例如 16：9）？我的代码是这样的（简化）。

    <div style="width: 100px; height: 50px;" id="container">
<img src="" style="width: 100%, height:100%" id="inside">
</div>

我已经尝试过填充底部 70% 等，但这对我不起作用，因为（我认为）内部就像相对于容器高度而不是填充？

Answer 1

要保持比率，您应该从

宽度：100%，高度：自动

尝试做一个工作小提琴，以更好地解释你需要什么

Answer 2

要保持图像的比例，您可以使用

#container {
  width: 100px;
  height: 50px;
}
#container img {
  width: 100%;
  height: auto;
}

<div id="container">
<img src="http://florisdeboer.com/Screenshot%20(80).png" id="inside">
</div>