如何使具有不同宽度和高度的动态加载图像响应 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

<div id="images"><img class="img" src="" alt="" /></div>

.img
{
    width=100%;
}

例如，您的 div 宽度应为 100%。

不要使用最大宽度

您也可以将 #images div 设置为 80% - 它会响应并且图像会重新调整为 div 宽度

Answer 2

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

我用过

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

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

---

更新

实现这一点的关键是设置

html, body {
    height: 100%;
}