使图像适应容器大小

Question

我有一个网页，我在拇指视图中显示了很多图像，所以我有一个所有拇指的已定义尺寸：

然后，加载在该容器中的图像可以更高或更宽，所以我希望它能够正确显示。例如：如果图像较高，则应显示在中心：

然后，如果图像更宽，则应为：

目前图像正在填充整个容器，因此其中一些不按预期显示，一些正在扩展而另一些则太宽。提前致谢！

Answer 1

这将有助于

flex-box解决方案

div {
  height: 300px;
  width: 300px;
  border: 1px solid;
  display: flex;
  justify-content: center;
  align-items: center;
}
img {
  max-height: 100%;
  max-width: 100%;
}

<div><span><img src="https://placeholdit.imgix.net/~text?txtsize=28&txt=150%C3%97300&w=150&h=300"></span></div>
<div><span><img src="https://placeholdit.imgix.net/~text?txtsize=28&txt=550%C3%97200&w=550&h=200"></span></div>

display:inline-block解决方案

div {
  height: 300px;
  width: 300px;
  border: 1px solid;
  text-align: center;
}
div:before {
  content: '';
  display: inline-block;
  height: 100%;
  vertical-align: middle;
}
img {
  max-height: 100%;
  max-width: 100%;
  vertical-align: middle;
}

<div><span><img src="https://placeholdit.imgix.net/~text?txtsize=28&txt=150%C3%97300&w=150&h=300"></span></div>
<div><span><img src="https://placeholdit.imgix.net/~text?txtsize=28&txt=550%C3%97200&w=550&h=200"></span></div>

Answer 2

如果您可以将图像设置为背景，则可以使用CSS：

background-size: contain;

这个简单的规则将照顾一切。