javascript - 具有设定高度的响应式图像设计

Question

如果有人可以帮助我解决响应式图像的小问题，我会感到很受伤。

我有一个我想要的高度。 200 px 和容器宽度的大约 100%。这就产生了图像被拉伸(stretch)并且看起来不好看的问题。我想知道是否有任何方法可以使图像保持其比例并且仍然看起来不错。我可以在它周围放置一个具有设定高度的容器并使溢出隐藏在顶部和底部的所有东西后面吗？我该怎么做最简单？

关于我如何解决问题的任何其他建议？

Answer 1

你解决这个问题的方式是错误的。您不能同时限制 height 和 width 并保持图像的纵横比。

至于这种情况，请考虑以下 CSS:

img {
  height: 200px;
  width: auto;
}