Question

我们希望以页面为中心显示这样的图像：高度应为窗口高度的100％，并具有相应的比例宽度。在图像的任一侧，我们希望继续在图像的顶部和底部看到的灰色砖图案。背景应与图像中的背景大小匹配，并与图像中的一致，无论图像大小如何。

有人可以建议只使用CSS的方法吗？

enter image description here

这是我到目前为止尝试过的那种标记：

<div id="container">
    <img src="http://i.metro.co.uk/images/temp/visual.png" id="middle">
</div>

CSS：

#container {
    height: 100%;
    background: url(visual-top.png) repeat-x;
}

#middle {
    outline: 1px solid red;
    display: block;
    height: 100%;
    margin: 0 auto;
}

这里是Codepen。

Answer 1

当然可以。你可能会遇到别名问题，这样你的图像就不能很好地排列，但理论上它很容易。

我这样做的方法是使用多个背景。这是你需要的CSS：

body {
    background: url([screenshot.jpg]) center top no-repeat, url([tile.jpg]) center top repeat-x;
    background-size: auto 100%, auto 17.5%;
}

然后你需要摆弄瓷砖的高度。我想出了17.5％，但这取决于你的截图。

Here is a working fiddle.

Answer 2

<div id="brick">

</div>
<div id="mario">

</div>

CSS

html,body{
    width: 100%;
    height: 100%;
    margin: 0;
}
#brick{
    position:absolute;
    width: 100%;
    height: 60px;
    background-color:gray;
    background-image: url(brick.jpg);
    background-size: 100% 100%;
    top:0;left:0;
    z-index: -1;
}
#mario{
    width: 400px;
    height: 100%;
    z-index: 2;
    background-image:url(mario.jpg);
    background-size: 100% 100%;
    margin: auto;
    border: 1px solid;
}

Answer 3

是的，可以做到。

<div class="wrapper"><img src="yourimage.jpg"/></div>

css

.wrapper{
width:100%;
height:100%;
text-align: center;
}
.wrapper img{
height:100%;
z-index:1;
}

所以它将在你的背景之上

Answer 4

html：

<div class="wrapper">
    <div class="top"></div>
    <img src="path/to/img.jpg"/>
</div>

和css：

.wrapper{
    text-align: center;
    height: 100%;
    width: 100%;
    position: relative;
}
.wrapper .top{
    position: absolute;
    height: 80px;
    left: 0px;
    top: 0px;
    background: url('pattern.jpg') 0 0 repeat;
    width: 100%;
    z-index: -1;
}
.wrapper img{
    height: 100%;
    width: auto;
}

Answer 5

<body>
<style>
.main{
   width:100%;
   display:table;
   text-align:center;
   height: "image-height";
}
.wrapper{
    width:100%;
    height:auto;
    display:table-cell;
    text-align:center;
    vertical-align:middle;
}
</style>

<div class="main">
 <div class="wrapper">
    <img src="image.jpg">
 </div>
</div>
</body>

You can try this. This is nice article.

如何将图像居中并将其赋予100％的窗口高度，并在其周围动态调整图像大小？

5 个答案: