CSS 响应式图像全屏居中 - 保持纵横比，不超过窗口
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/18490334/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Responsive Image full screen and centered - maintain aspect ratio, not exceed window
提问by sanjaypoyzer
So I want an imgto 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
谢谢
回答by Itay
To center it, you can use the technique shown here: Absolute centering.
要将其居中，您可以使用此处显示的技术：绝对居中。
To make it as big as possible, give it max-widthand max-heightof 100%.
为了使它尽可能大，给它max-width和max-height的100%。
.className {
/* Absolute centering */
position: fixed;
top: 0;
bottom: 0;
left: 0;
right: 0;
/* Size limit */
max-width: 100%;
max-height: 100%;
/* Other required settings */
margin: auto;
overflow: auto;
}
回答by dcro
You could use a divwith a background image instead and this CSS3 property:
您可以使用div带有背景图像的 a 和此 CSS3 属性：
background-size: contain
background-size: contain
You can check out an example on:
您可以查看以下示例：
https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Scaling_background_images#contain
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.
contains 值指定无论包含框的大小如何，都应缩放背景图像，使每一边尽可能大，同时不超过容器相应边的长度。
However, keep in mind that your image will be upscaled if the divis larger than your original image.
但是，请记住，如果您的图像div大于原始图像，则会被放大。
回答by James Siebert
After a lot of trial and error I found this solved my problems. This is used to display photos on TVs via a browser.
经过大量的反复试验，我发现这解决了我的问题。这用于通过浏览器在电视上显示照片。
- It Keeps the photos aspect ratio
- Scales in vertical and horizontal
- Centers vertically and horizontal
The only thing to watch for are really wide images. They do stretch to fill, but not by much, standard camera photos are not altered.
Give it a try :)
- 它保持照片的纵横比
- 垂直和水平刻度
- 垂直和水平居中
唯一需要注意的是非常宽的图像。它们确实会拉伸以填充，但不会太多，标准相机照片不会改变。
试一试 ：）
*only tested in chrome so far
*目前仅在 chrome 中进行过测试
HTML:
HTML：
<div class="frame">
<img src="image.jpg"/>
</div>
CSS:
CSS：
.frame {
border: 1px solid red;
min-height: 98%;
max-height: 98%;
min-width: 99%;
max-width: 99%;
text-align: center;
margin: auto;
position: absolute;
}
img {
border: 1px solid blue;
min-height: 98%;
max-width: 99%;
max-height: 98%;
width: auto;
height: auto;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
}
回答by Xavier
I have come to point out the answer nobody seems to see here. You can fullfill all requests you have made with pure CSS and it's very simple. Just use Media Queries. Media queries can check the orientation of the user's screen, or viewport. Then you can style your images depending on the orientation.
我来指出这里似乎没有人看到的答案。您可以使用纯 CSS 完成所有请求，而且非常简单。只需使用媒体查询。媒体查询可以检查用户屏幕或视口的方向。然后，您可以根据方向设置图像样式。
Just set your default CSS on your images like so:
只需在图像上设置默认 CSS，如下所示：
img {
width:auto;
height:auto;
max-width:100%;
max-height:100%;
}
Then use some media queries to check your orientation and that's it!
然后使用一些媒体查询来检查您的方向，就是这样！
@media (orientation: landscape) { img { height:100%; } }
@media (orientation: portrait) { img { width:100%; } }
You will always get an image that scales to fit the screen, never loses aspect ratio, never scales larger than the screen, never clips or overflows.
您将始终获得缩放以适合屏幕的图像，永远不会丢失纵横比，永远不会缩放到大于屏幕，永远不会剪辑或溢出。
To learn more about these media queries, you can read MDN's specs.
要了解有关这些媒体查询的更多信息，您可以阅读MDN 的规范。
Centering
定心
To center your image horizontally and vertically, just use the flex box model. Use a parent divset to 100% width and height, like so:
要水平和垂直居中您的图像，只需使用flex box 模型。使用div设置为 100% 宽度和高度的父级，如下所示：
div.parent {
display:flex;
position:fixed;
left:0px;
top:0px;
width:100%;
height:100%;
justify-content:center;
align-items:center;
}
With the parent div's displayset to flex, the element is now ready to use the flex box model. The justify-contentproperty sets the horizontal alignment of the flex items. The align-itemsproperty sets the vertical alignment of the flex items.
将父 divdisplay设置为flex，元素现在可以使用弹性盒模型了。该justify-content属性设置弹性项目的水平对齐方式。该align-items属性设置弹性项目的垂直对齐方式。
Conclusion
结论
I too had wanted these exact requirements and had scoured the web for a pure CSS solution. Since none of the answers here fulfilled all of your requirements, either with workarounds or settling upon sacrificing a requirement or two, this solution really is the most straightforward for your goals; as it fulfills all of your requirements with pure CSS.
我也想要这些确切的要求，并在网上搜索纯 CSS 解决方案。由于这里的答案都没有满足您的所有要求，无论是通过变通方法还是通过牺牲一两个要求来解决，因此该解决方案对于您的目标来说确实是最直接的；因为它使用纯 CSS 满足您的所有要求。
EDIT: The accepted answer will only appear to work if your images are large. Try using small images and you will see that they can never be larger than their original size.
编辑：接受的答案只有在您的图像很大时才会出现。尝试使用小图像，您会发现它们永远不会大于原始尺寸。
回答by Vladimir
yourimg {
position: fixed;
left: 0;
top: 0;
width: 100%;
height: 100%;
}
and make sure there is no parent tags with position: relative in it
并确保没有带有 position:relative 的父标签
