html - 如何在CSS中响应动态加载不同宽度和高度的图像

Question

我将图像动态加载到我的网页中并使它们响应:

<div id="images"><img id="dynamic_img" src=""/></div>

CSS:

#images{
  height: 80%;
  width: 30%

}

img{
     max-height: auto 
      max-width:100%
}

现在的问题是，图像具有不同的高度和宽度。现在，当图像的宽度长于其高度时，此方法有效，但反之则不行。 (在这种情况下，max-height 将为 100%，max-width: auto

是否可以根据 CSS 中加载的图像来切换这两个值，还是我需要为此使用 JS？

提前致谢

Answer 1

这里有一个图像水平和垂直排列的示例。

我用过

img {
    max-width: 100%;
    max-height: 100%;
}

给你:https://jsfiddle.net/jormaechea/j219ucnc/1/

---

更新

实现这个的关键是设置

html, body {
    height: 100%;
}