html - Logo 和标题容器未正确调整大小

Question

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

这是登录页面的链接 我遇到了 http://www.dorkdungeontestblog002.blogspot.com/ 问题

我希望标题图片和 Logo 图片在响应不同屏幕尺寸的同时产生以下效果，但正如您通过查看网站所见，我没有实现该结果。

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}

Answer 1

在这里写给编辑。

.container,
#front_page_container {
    width: 100%
}

这样倒计时保持居中。但是在小分辨率下太大了，我不知道这个类是否在网站的另一个地方使用。我的建议是改变布局。您使用的模板根本不是响应式的，因此您需要做大量工作才能使其响应式。