Question

我正在尝试使用以下代码使用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;

但图片已放在html div中，请参阅此处

<div class="fixed-background">
  <img src="photo2.jpg"/>
</div>

需要确切地说它是如何使用css版本的，唯一的区别是图像是在html中调用而不是在样式表中。

Answer 1

试试这个

tbody

Answer 2

不使用背景，请考虑以下事项：

#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) */
}

Answer 3

全屏图片？你可以通过HTML

做这样的事情

<div class="fixed-background">
  <img src="photo2.jpg" height="100%" width="100%">
</div>

http://jsfiddle.net/pj73m4po/

编辑：

你正在寻找这样的东西吗？

http://jsfiddle.net/pj73m4po/1/

Answer 4

请尝试以下操作：http://jsfiddle.net/pj73m4po/4/

将图像放入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%;
}

而是使用min-width和min-height。如果您有预定义图像，则可以在css中调整位置。如果你不幸的话，你需要javascript来集中它。

Answer 5

我从你的CSS收集的要点如下：

图像中心
修复图像的位置（因此不会随页面滚动）
覆盖视口，按比例缩放以适合

那就是说，我建议以下给出你的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%);
}

老实说，我没有测试过上面的内容，但我怀疑你可能会使用固定和绝对定位一起得到一些奇怪的结果。但由于代码直接使用视口单元定义宽度和高度，因此它应该是好的。您可能需要将100vh边距应用于同级元素以使事情排列，因为position:fixed;会将元素从文档流中分离出来。

Answer 6

在object-fit: cover;标记上使用<img>：

<div>
  <img src="photo2.jpg" style="object-fit: cover;"/>
</div>

该参数是一个相当新的东西（并非所有浏览器都支持），但这是要走的路。另请参阅http://caniuse.com/#search=object-fit

居中的全屏html图像（不是css中的图像）

6 个答案: