居中的全屏 html 图像（不是 css 中的图像）
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/25249802/
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
Centered full screen html image (not an image in css)
提问by Dan
I'm trying to have a full screen image, easy enough with css using the code below.
我正在尝试使用以下代码使用 css 获得全屏图像，这很容易。
width:100%;
height:100%;
background: url('photo2.jpg');
background-repeat: no-repeat;
background-position: center center;
background-attachment: fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
but the image is already placed in an html div, see here
但图像已经放置在 html div 中，请参见此处
<div class="fixed-background">
<img src="photo2.jpg"/>
</div>
It need's to be exactly how it would be using the css version, the only difference would be the image is called in html and not in the stylesheet.
它需要准确地使用 css 版本，唯一的区别是图像是在 html 中调用的，而不是在样式表中调用。
采纳答案by Nicola Voso
try this
尝试这个
<style>
body {
height: 100%;
width: 100%;
margin: 0;
padding: 0;
}
.fixed-background {
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
overflow: hidden;
}
.myimg {
height: inherit;
}
</style>
<html>
<body>
<div class="fixed-background">
<img src="public/dbs/images/1.jpg" class="myimg" />
</div>
</body>
</html>
回答by Johannes
Use object-fit: cover;on the <img>tag:
object-fit: cover;在<img>标签上使用：
<div>
<img src="photo2.jpg" style="object-fit: cover;"/>
</div>
that parameter is a rather new thing (not all browsers supported), but that's the way to go. See also http://caniuse.com/#search=object-fit
该参数是一个相当新的东西（并非所有浏览器都支持），但这就是要走的路。另见http://caniuse.com/#search=object-fit
回答by davewoodhall
Without using a background, consider this:
在不使用背景的情况下，考虑一下：
#mydiv {
position: absolute;
top: 50%;
right: 50%;
bottom: 50%;
left: 50%;
margin-top: -100px; /* (calculate half the height of your image) */
margin-left: -100px; /* (calculate half the width of your image) */
}
回答by Trebblez
Full screen Image? you could do something like this through HTML
全屏图像？你可以通过 HTML 做这样的事情
<div class="fixed-background">
<img src="photo2.jpg" height="100%" width="100%">
</div>
EDIT:
编辑：
or are you looking for something like this?
或者你正在寻找这样的东西？
回答by Danny van Holten
Try the following: http://jsfiddle.net/pj73m4po/4/
尝试以下操作：http: //jsfiddle.net/pj73m4po/4/
Put your image in a div 100% high and wide. If you don't want your image to be stretched you don't want to use width and height seperately.
将您的图像放在 100% 高和宽的 div 中。如果您不想拉伸图像，则不想单独使用宽度和高度。
body {
height: 100%;
width: 100%;
margin: 0;
padding: 0;
}
.fixed-background {
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
overflow: hidden;
}
img {
height: auto;
width: auto;
min-width: 100%;
min-height: 100%;
}
Instead use min-width and min-height. if you have a predefined image you can adjust the position in css. If you don't unfortunately you need javascript to center it.
而是使用最小宽度和最小高度。如果您有预定义的图像，则可以在 css 中调整位置。如果你不不幸，你需要 javascript 来居中它。
回答by Donnie D'Amato
The points that I gather from your css are the following:
我从您的 css 中收集的要点如下：
- Center the image
- Fix the position of the image (so it doesn't scroll with the page)
- Cover the viewport, scale proportionally to fit
- 将图像居中
- 修复图像的位置（因此它不会随页面滚动）
- 覆盖视口，按比例缩放以适合
That said, I suggest the following given your html
也就是说，我建议以下给定您的 html
.fixed-background{
position:fixed;
width:100vh;
height:100vh;
overflow:hidden;
}
.fixed-background > img{
position:absolute;
width:100%;
height:auto;
top: 50%;
transform: translateY(-50%);
}
Honestly, I haven't tested the above but I would suspect you might get some weird results using fixed and absolute positioning together. But since the code defines the width and height directly using viewport units, it should be good. You might need 100vhof margin applied to a sibling element to get things to line up because position:fixed;will break the element out of the document flow.
老实说，我还没有测试过上面的内容，但我怀疑你可能会同时使用固定和绝对定位得到一些奇怪的结果。但是由于代码直接使用视口单位定义了宽高，应该不错。您可能需要100vh将边距应用于同级元素以使事情对齐，因为这position:fixed;会使元素脱离文档流。
