0

我需要建立一个包含所有 1600 像素宽的大型高分辨率图像的网站，无论浏览器屏幕尺寸如何，我都需要将其居中放在屏幕上。

这些图像的设计使它们在 1024 像素的中心看起来很好，但需要始终从中心而不是顶部和左侧固定显示。

有没有人有一个解决方案 - 理想情况下适合图像的内联和背景版本！？

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

4

4 回答 4

5

因为你没有提供任何明确的 HTML 标记，只是对你的问题的一般描述，我为你提供了一个链接到http://css-tricks.com/centering-in-the-unknown/ 在这里你可以找到各种 CSS 技术使内容垂直和水平居中。

jQuery 不需要将内容居中，我相信您将使用适当的 HTML 标记和一些 CSS 来管理它。

不过， Fiddle ( http://jsfiddle.net ) 会有所帮助。

于 2012-10-01T14:37:32.493 回答
0

您的意思是图像将保持相同的大小，但即使您只查看图像的中心部分，也设计得很好看？如果是这样...

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

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

这将使 1600x800 像素的图像居中。只需将上边距更改为图像高度的负数。

不需要声明尺寸，只是为了说明而添加。

于 2012-10-01T15:11:15.293 回答
0

对我有用的是将图像放入带有 id 背景的 div 中，紧跟在 body 之后，然后使用这个 CSS：

#background {
    z-index: -1;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}
于 2012-10-01T14:42:22.110 回答
0

两种方式：

  • 使用背景图像

    这个很简单，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。

    • 于 2012-10-01T18:03:59.990 回答