如果我的父容器大小未知并且是动态的，如何在保持宽高比的同时调整图像大小

Question

我正在制作一个图片库。在开发将图像带到浏览器窗口的完整尺寸的功能时，我意识到我无法专门设置

img

所属的父元素的大小，因此它不会很好地发挥/适合我的方式想要它适合。我通常使用以下技巧来使图像很好地调整大小，同时保持纵横比，很好地保持居中并且不会溢出其父元素。

.keep-img-ratio {
    max-width: 100%;
    max-height: 100%;
    margin: auto;
  }

当

img

的父元素是动态窗口的大小时，如何解决这个问题？

Answer 1

试试这个：

img {
    width: 100%;
    height: auto;
}