响应式图像全屏和居中 - 保持纵横比,不超过窗口

Question

所以我希望img显示一个

• 尽可能大(当它是风景时填充宽度/纵向时是高度)
• 没有作物
• 没有歪斜或拉伸(原始宽高比)
• 垂直和水平居中

此外,图像的原始大小未知.

我已经尝试了很多不同的选项,包括一个flexbox(获得垂直中心),但似乎没有任何东西勾选所有框.

理想情况下,我当然希望这是一个全CSS解决方案,但我也在研究一些JS.

谢谢

Answer 1

jsFiddle Demo

要使其居中,您可以使用此处显示的技术:绝对居中.

为了使它尽可能大,给它max-width和max-height的100%.

.className {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    max-width: 100%;
    max-height: 100%;
    margin: auto;
    overflow: auto;
}

Answer 2

您可以改用div带有背景图片的CSS3属性：

background-size: contain

您可以查看以下示例：

https://developer.mozilla.org/zh-CN/docs/Web/Guide/CSS/Scaling_background_images#contain

引用Mozilla：

包含值指定不管容纳盒的大小如何，背景图像都应缩放，以使每一侧尽可能大，同时不超过容器相应侧的长度。

但是，请记住，如果div图像大于原始图像，则图像将被放大。