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

Question

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

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

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

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

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

谢谢。

Answer 1

如果将图像加载为容器的背景，则可以随意使用background-size: coverorbackground-size: contain并将background-position: center center其保持在中间，而不管大小。

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