标识和标题容器未正确调整大小

时间:2015-10-21 03:56:02

标签: html css image

我一直在努力让我的公司徽标图片和背景图片都根据他们查看的屏幕大小调整大小。但是,当我正确调整背景图像大小时,徽标图像根本不会改变大小。但是,当我能够让它们都调整大小时,徽标图像就太大了,覆盖整个屏幕的宽度。然后,当我将徽标图像的宽度更改为更小时,背景图像会缩小到小于屏幕的宽度。

以下是我遇到http://www.dorkdungeontestblog002.blogspot.com/

问题的目标网页的链接

我希望标题图片和徽标图片在响应不同的屏幕尺寸时产生以下效果,但正如您通过查看网站所看到的那样,我无法实现这一结果。

Hopeful Header and Logo Appearance

如果有人可以帮助我,我会非常感激,我已经在这里待了好几个小时了,而且它不起作用。如果我还能提供任何进一步的信息,请告诉我。

这是标题说明下的所有代码......

/*---------[HEADER]---------*/
#header-holder { width:100%; height:auto; float:left; color:#fff; background-image:url(https://lh3.googleusercontent.com/-dYSRZJJhqiM/VibgbmiBMeI/AAAAAAAADIU/OfLCyLyozy4/s1440-Ic42/DD%252520Landis%252520Large.png);background-repeat:no-repeat;background-size: contain;}
#logo-container img {
width: 100%;
height: auto;
background-size: contain;
}
.Page_title{font-family:'Droid Sans';font-weight:bold;font-size:27px;text-shadow:0px 2px 0px #000;width:800px;text-align:center;padding:10px;margin:17px auto 30px auto;}
.Page_content{font-family:'Droid Sans';font-size:13px;width:560px;text-align:center;margin:0 auto;padding:0 0 56px 0;line-height:22px;color:#ffbda4;text-shadow:0px 1px 0px #000}

1 个答案:

答案 0 :(得分:0)

在这里写给编辑。

.container,
#front_page_container {
    width: 100%
}

以这种方式倒计时仍然居中。但是在小分辨率太大,我不知道这个类是否在该网站的另一个地方使用。 我的建议是改变布局。您正在使用的模板根本没有响应,因此您需要做很多工作才能使其响应。