CSS和不同尺寸的显示器？

Posted 2023-03-06

【中文标题】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 颜色）。