Html 如何使图像自动调整大小以适应与高度相关的浏览器窗口
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/38845226/
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
How to make an image auto resize to fit browser window with relation to height
提问by Breageside
I am trying to make an image fit the browser window in relation to its height and respond dynamically to window size.
我正在尝试使图像适合与其高度相关的浏览器窗口，并动态响应窗口大小。
I need the image aspect ratio to stay the same but the image can be ,larger than its originally resolution if viewed on large screens.
我需要图像纵横比保持不变，但如果在大屏幕上查看，图像可能会大于其原始分辨率。
I don't want the image to spill outside of the screen and create a scolling effect.
我不希望图像溢出屏幕外并产生滚动效果。
The image must stay centered inside is container both vertically and horizontally.
图像必须在容器内垂直和水平保持居中。
回答by freewheeler
It is not clear what you tried so far and we don't see any code. I'll try to answer anyway and perhaps it'll help you.
目前尚不清楚您尝试了什么，我们也没有看到任何代码。无论如何我都会尝试回答，也许它会帮助你。
First of all, when you working with responsive layouts, always try to size your elements with viewport height and width. This helps you keep your content relative to the browser size - no matter if resized nor how large the screen is.
首先，当您使用响应式布局时，请始终尝试使用viewport height and width. 这有助于您保持与浏览器大小相关的内容 - 无论是否调整大小或屏幕有多大。
This code might help you insert a responsive image to your site:
此代码可能会帮助您将响应式图片插入您的网站：
div {
width:80vw;
height:80vh;
}
img {
max-width:100%;
height:auto;
max-height:100%;
}
Working example here
这里的工作示例
In this example is divsized 80% of both window's height and width, so it never exceeds the viewport. Max. measures of imgare 100% of the divand height:auto;secures that it preserves its aspect ratio. Image then fits a div to the max allowed. You can comfortably center the image by setting display:table-cell; vertical-align:middle; text-align:center;to the DIV.
在此示例中，div大小为窗口高度和宽度的 80%，因此它永远不会超出视口。最大限度。的措施img是 100%div并height:auto;确保它保留其纵横比。然后图像将 div 适合最大允许值。通过设置display:table-cell; vertical-align:middle; text-align:center;为 DIV，您可以轻松地将图像居中。
Another solution would be:
另一种解决方案是：
background-image:url(' ');
background-size:contain;
background-repeat:no-repeat;
background-position:center;
Check it out here
检查出来这里
回答by Aidan Feldman
Using the object-fitCSS property, you can do it without a container:
使用object-fitCSS 属性，您可以在没有容器的情况下执行此操作：
img {
height: 100vh;
width: 100%;
object-fit: contain;
}
See the browser support.
请参阅浏览器支持。
回答by Maxouhell
To do something like your exemple, you can use background-size:cover.
要执行类似于您的示例的操作，您可以使用background-size:cover.
coverScale the image, while preserving its intrinsic aspect ratio (if any), to the smallest size such that both its width and its height can completely cover the background positioning area.
cover将图像缩放到最小尺寸，同时保留其固有纵横比（如果有），使其宽度和高度都可以完全覆盖背景定位区域。
This makes sure that the background image is covering everything. There will be no visible background-color, however depending on the screen's ratio a great part of your image could be cut off
这可确保背景图像覆盖所有内容。不会有可见的 background-color，但是根据屏幕的比例，您的图像的很大一部分可能会被切掉
Also see this plunker : https://plnkr.co/edit/khXfLdsUV5aIJlTo4SSl?p=preview
另请参阅此 plunker：https://plnkr.co/edit/khXfLdsUV5aIJlTo4SSl ?p =preview
