将图像调整为 div 并将其居中

Question

好吧，我有一个尺寸宽度：200 像素和高度：110 像素的 div 支架。

当我加载图像时，通常它会超过这样的尺寸，所以我需要根据图像的尺寸将图像的宽度或高度调整为这样的内容。所以，如果用with调整，可能会出现三种情况：

1.- 高度大于110px，所以div溢出设置为隐藏，需要垂直居中。

2.- 高度等于 110px，没问题。

3.-（问题）高度小于 110px。在这种情况下我应该怎么做？因为我想覆盖所有的div内容。

谢谢。

Answer 1

如果您将图像加载为容器的背景，则可以使用background-size: cover 或background-size: contain 并使用background-position: center center 将其保持在中间，无论大小。

或者，您可能想要使用表格单元格，因为这些单元格允许内容在内部垂直对齐（使用带有一个单元格的表格，或者在容器上使用display: table-cell）。