javascript - 全屏图像，图像放置在 html 中

Question

我试图将图像居中，我附上了一个 jsfiddle 来显示我想要的结果，唯一的区别是图像被放置在 html 而不是 css 代码中。

http://jsfiddle.net/6y2qjxm0/3/

这是我在 fiddle 中使用的 css，我已经取出了图片 url。

width:100%;
height:100%;
background: no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;

最后是 html:

<div class="full-screen">
  <img src="http://placehold.it/350x150">
</div>

做不到这一点，有没有人知道更好的方法？

它必须居中并且必须是 100% 宽度和 100% 高度。

谢谢

更新:图像必须像 fiddle 一样保持比例。

Answer 1

已更新 此解决方案与图像尺寸无关，除此之外它需要其宽度大于其高度。它使用 CSS 定位将 .full-screen 中的图像设置为全高、保持比例并具有 50% 的负水平偏移(居中)。

HTML:

<div class="full-screen">
    <img src="http://placehold.it/350x150" />
</div>

CSS:

body, html {
    margin: 0;
    height: 100%;
    overflow-x: hidden;
}
.full-screen {
    position: relative;
    height: 100%;
}
.full-screen img {
    position: absolute;
    left: 0;
    height: 100%;
    left: -50%;
}

更新 fiddle :http://jsfiddle.net/5e6btwa2/1/