如何将图像居中和自动缩放？

Posted 2023-03-05

【中文标题】如何将图像居中和自动缩放？

【英文标题】：How to both center and auto-scale an image?

【发布时间】：2012-03-09 03:16:44

【问题描述】：

可能是 CSS 布局最常见的两个问题：

水平和垂直居中。 将图像自动缩放到视口大小（保持纵横比，不会垂直或水平溢出）。

单独来说，两者都有很好的解决方案：

在外部容器元素上使用 display: table，在内部容器元素上使用 display: table-cell、vertical-align: middle 和 text-align: center。 在img 元素上使用max-height: 100% 和max-width: 100%。

But combining both only does the centering，即使在 img 周围的所有元素上使用 height: 100% 和 width: 100%。

我怎样才能同时实现这两个目标而不屈服于硬编码的高度和宽度值或 javascript？

【问题讨论】：

要明确：您希望图像水平和垂直居中（＃1），您希望图像的边缘接触浏览器窗口的两侧，或者顶部/底部触摸窗口顶部/底部的图像，您希望保持图像的纵横比？

“自动缩放图像到视口大小。”你的意思是，拉伸图像以完成填充视口？

【参考方案1】：

img 
    height: 100%;
    width: 100%;
​

Fiddle

基本上，图像需要占其容器大小的 100% 的高度和宽度。如果为容器设置不同的大小，它会更小。在小提琴中你可以很容易地看到它缩放到宽度，但由于小提琴的高度稍微固定，所以很难分辨。

【讨论】：

我怀疑 OP 希望保持原始图像的纵横比。

也许吧。很高兴知道。我假设这是针对移动设备等多种屏幕尺寸的。

只添加宽度 100%，然后比例将保持不变。 css-tricks.com/how-to-resizeable-background-image。或者，您可以使用 css3 background-sizing: cover/contain

@thepriebe, @Yannik Schall：width: 100% 图像垂直溢出窗口。

【参考方案2】：

我不是 100% 确定这一点，但是当您说任何事情的 100% 时，父级的尺寸必须是固定的，或者应该返回到固定的尺寸。尝试给出宽度：SOMEINTpx;高度：SOMEINTpx；在外容器中。

【参考方案3】：

您可以将图像设置为背景并尝试以下操作：

background-position: center center;
background-size: cover; /*or contain*/