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

So I want an img to be displayed

所以我想要显示一个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.

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

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.

我已经为此尝试了很多不同的选项，包括一个flexbox（获得垂直中心），但似乎没有任何东西勾选所有方框。

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

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

Thanks

谢谢

3 个解决方案

#1

jsFiddle Demo

jsFiddle演示

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

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

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

为了使其尽可能大，请将其最大宽度和最大高度设为100％。

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

#2

You could use a div with a background image instead and this CSS3 property:

您可以使用带有背景图像的div和此CSS3属性：

background-size: contain

background-size：包含

You can check out an example on:

您可以查看以下示例：

https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Scaling_background_images#contain

To quote Mozilla:

引用Mozilla：

The contain value specifies that regardless of the size of the containing box, the background image should be scaled so that each side is as large as possible while not exceeding the length of the corresponding side of the container.

包含值指定无论包含框的大小如何，都应缩放背景图像，使每个边尽可能大，同时不超过容器对应边的长度。

However, keep in mind that your image will be upscaled if the div is larger than your original image.

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

#3

-1

yourimg {
position: fixed;
left: 0;
top: 0;
width: 100%;
height: 100%;
}

and make sure there is no parent tags with position: relative in it

并确保没有位置的父标签：相对于它

#1