Question

我需要构建一个宽度为1600像素的高分辨率图像的网站，无论浏览器屏幕尺寸如何，我都需要在屏幕上居中。

这些图像的设计使它们看起来很好，居中到1024 px，但需要始终从中心而不是从左上角开始显示。

有没有人有解决方案 - 理想情况下哪种解决方案适用于图像的内嵌和背景版本？？

CSS3解决方案很好，因为我的目标是ie8 plus。

Answer 1

由于您还没有提供明确的HTML标记，只提供了问题的一般说明，因此我为您提供了http://css-tricks.com/centering-in-the-unknown/的链接在这里，您可以找到各种CSS技术，以垂直和水平为中心内容。

jQuery没有必要集中内容，我相信你会用适当的HTML标记和一些CSS来管理它。

小提琴（http://jsfiddle.net）会有所帮助。

Answer 2

对我有用的是将图像放在身体后面有id背景的div中，然后使用这个CSS：

#background {
    z-index: -1;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

Answer 3

你的意思是图像保持相同的大小，但即使你只是查看它的中央部分，它的设计看起来也不错吗？如果是的话......

<img href="..." class="centered" />

.centered {
    position:fixed; top:50%; left:50%;
    width:1600px; height:800px;
    margin: -400px 0px 0px -800px;
    }

这将使图像居中1600x800px。只需将上边距改为图像高度的一半即可。

没有必要声明尺寸，只是添加说明。

Answer 4

两种方式：

使用背景图片

这很简单，CSS代码如下

div.image-wrapper {
    background: url('imgs/example.png') no-repeat center;
}

使用IMG标签

这是HTML：

<div id="img-area">
    <img src="imgs/example.png"/>
</div>

CSS：

#img-area img {
    display:block; //this will let us use margin auto
    margin:auto;
    top: (n)px;  //you can obtain 'n' by using JavaScript
}

或者您可以使用中列出的方法 http://css-tricks.com/centering-in-the-unknown/;这将免于使用javascript。

Div中的CSS中心图像

4 个答案: