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

Question

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

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

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

我希望有人可以帮助我，提前谢谢：D

（我发现很难解释我的问题因为我的英语不是最好的，如果你有更多问题可以随意提问，我会尽力帮助你）

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>