CSS和不同尺寸的显示器?

Posted

技术标签:

【中文标题】CSS和不同尺寸的显示器?【英文标题】:CSS and different size of monitor? 【发布时间】:2011-03-02 13:06:27 【问题描述】:

我正在做一个网站 (WIP)。我遇到了一些CSS问题,希望你们能帮助我。

我现在的情况:

我有一张图片,我们称之为“bg.png”,宽度约为 2500 像素,背景图片的中心有我的徽标。 我的网站应该面向所有规模(从 800 x 600 到 2400 x XXX 的小型)用户。

我的问题:

如何使背景图片(bg.png)居中,使徽标始终位于不同尺寸的显示器屏幕的居中(水平)?

【问题讨论】:

作为新用户,如果答案符合您的需求,请务必点击“接受”。 顺便说一下问题(当前情况 -> 问题/期望的行为)。 您应该知道有些屏幕大于 2500。而且您也可以在多个屏幕上扩展某些内容。所以 2500 不是一个足够大的限制。 谢谢大家,你们都很友好和乐于助人:) 【参考方案1】:

如果它只是一个你可以使用的徽标文件

<style>
img

    position:absolute;
    left:-50%;
    top:-50%;
    z-index:-1;

</style>

【讨论】:

这不会使图像完全居中。图像的左侧居中,但图像的中心未居中。 为此,添加 margin-left: -50%, margin-top: -50%。【参考方案2】:
#your_img 

   position: absolute;
   left: 50%;
   margin: -1250px;

当您将 img 元素放到另一个盒子上时,此解决方案是必要的。但要小心 - 它可能会改变父框的大小。

【讨论】:

【参考方案3】:
#your_img 
  width: 2500px; //In example 2500px
  margin: 50%;
  padding: -1250px; // 2500 divided by 2

它可能在 Internet Explorer 上不起作用,但您可以使用 position: absolute 的小技巧,如上所述

【讨论】:

【参考方案4】:
body  background: url('bg.png') 50% 50% no-repeat; 

这会将图片以全尺寸放置在页面的中心,并且用户将在其浏览器窗口允许的范围内看到尽可能多的背景图片。

【讨论】:

谢谢,它有效。但我需要再等 9 分钟才能接受答案。谢谢 Graphain 欢迎小学生,乐于助人。值得注册,这样您就可以随着时间的推移跟踪您的问题和答案,并鼓励其他人帮助您。 嗨 Graphain,它适用于 FF、chrome、opera 和 safari。但是在IE上不行,图片不显示。 问题已解决。而不是像这样将所有属性放在 1 行中: background: url('images/bg.png') 50% 50% no-repeat;我将它们分成: background: url('images/bg.png') no-repeat;背景位置:50% 50%; 很好的修复。也许顺序在 IE 上很重要,或者缺少一个属性(比如开始时的 bg 颜色)。

以上是关于CSS和不同尺寸的显示器?的主要内容,如果未能解决你的问题,请参考以下文章

流式布局和响应式布局

如何使我的自定义 HTML 小部件针对不同的屏幕尺寸显示不同?

CSS-@media和rem

从 json 获取容器尺寸并在 css 样式标签中显示值

css如何让图片根据显示器的尺寸来居中显示?

如何以针对不同尺寸显示器的模式排列多个 UIView