我必须为我的html类制作一个网站。当我在计算机上打开页面时，图像适合我想要的尺寸。但是，当我尝试在学校计算机上打开它时，它就像我期望的那样达到50％。我猜是因为屏幕分辨率不同。我如何使其在所有分辨率下都能正常工作？这是一张照片。http://i.imgur.com/7YsCSpa.png
顶部的徽标保持原位，但粉红色条不会。它不会覆盖整个屏幕。我的HTML是<div id="headbar"> <img src="headbar.png" alt="bar" /> </div>
我的CSS是
#headbar {
position: fixed;
margin-top: 85px;
width: 100%;
z-index: -1;
background-attachment: fixed;
headbar.png图片应该变成#headbar全粉红色吗？然后，它可能很简单：
#headbar img {width: 100%}
然后将按比例缩放。为防止这种情况，请#headbar设置高度并使图像高度为100％。当然，将其设置为背景图像（或者如果仅是粉红色则为彩色）会更有意义。
编辑-继续获取当前信息，这就是您所追求的吗？
#headbar {
width: 100%;
height: 50px;
position: fixed;
margin-top: 85px;
z-index: -1;
background-image: url(headbar.png);
background-size: 100% 100%
}
我刚刚增加了一些高度-使其适应最合适的高度。要提防的另一件事是获取图像的正确路径（绝对URL最简单）
background-image: url(/imagefolder/headbar.png);
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句