响应图像全屏和居中 - 保持宽高比，不超过窗口 [英] Responsive Image full screen and centered - maintain aspect ratio, not exceed window

问题描述

所以我想要显示 img

• 无作品


• 没有扭曲或伸展（原始长宽比）


• 垂直和水平居中

• as big as possible (filling the width when it is landscape / height when it is portrait)
• no crop
• no skew or stretch (original aspect ratio)
• centred both vertically and horizontally

此外，图片的原始大小未知。

Also, the image's original size is not known.

我已经尝试了很多不同的选项，包括一个flexbox一个（获得垂直中心），但没有什么似乎打勾所有的框。

I've tried quite a few different options for this, including a flexbox one (to get the vertical center), but nothing seems to tick all the boxes.

理想情况下，我希望这是一个全CSS解决方案，但我一直在寻找一些JS。

Ideally I'd like this to be an all CSS solution of course, but I have been looking into some JS as well.

感谢

推荐答案

jsFiddle演示

jsFiddle Demo

您可以使用此处显示的技术：绝对居中。

To center it, you can use the technique shown here: Absolute centering.

为了使它尽可能大，给它 max-width 和 max-height of 100％。

To make it as big as possible, give it max-width and max-height of 100%.

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

这篇关于响应图像全屏和居中 - 保持宽高比，不超过窗口的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！