Demo

Question

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

这是我在小提琴中使用的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％高度。

由于

更新：图片必须像小提琴一样保持比例。

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%;
}

更新了小提琴：http://jsfiddle.net/5e6btwa2/1/

Answer 2

在align标记中尝试使用值middle的属性img

 <img src="smth.gif" align="middle">

Answer 3

如果你想要与图像作为背景一样的行为，你可以这样做（取决于CSS3 transform method）：

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

<强> HTML

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

<强> CSS

* {
    margin:0;
    padding:0;
    position: relative;
}
html {
    width: 100%;
    height: 100%;
    background-size: cover;
    position: relative;
    overflow-y: scroll;
}
body {
    width: 100%;
    height: 100%;
    margin-left:auto;
    margin-right:auto;
    background: inherit;
    /* overflow: hidden; enable to disable scrolling */
}
.full-screen {
    width:100%;
    height:100%;
    overflow: hidden;
}
.full-screen img {
    min-width: 100%;
    min-height: 100%;
    left: 50%;
    transform: translate(-50%,0);
}

Answer 4

试试这个，它适用于IE8 +以及几乎所有其他浏览器：

HTML

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

CSS

.full-screen {
      position: fixed; 
      top: -50%; /* this will center the image vertically */
      left: -50%; /* this will center the image horizontally*/
      width: 200%; 
      height: 200%;
}
.full-screen img {
      position: absolute; 
      top: 0; 
      left: 0; 
      right: 0; 
      bottom: 0; 
      margin: auto; 
      min-width: 50%;
      min-height: 50%;
}

Demo

对于其他方式，请查看Chris Coyier关于CSS技巧的 this article 。上面的CSS在他的例子中用于技术＃2。

Answer 5

在ie9 +的支持下，

background-size: cover;是您最好的选择。让img覆盖页面而不会扭曲，只有在您知道其大小或愿意使用javascript时才有效。

为什么需要使用img？是因为你想要动态添加src吗？在这种情况下，您应该使用内联样式。

<div style="background-image:{{dynamicImage}}"></div>

全屏图像与图像放在HTML中

5 个答案:

HTML

CSS

Demo