徽标和标题容器没有正确调整大小

我一直在努力让我的公司徽标图像和背景图像根据所查看的屏幕大小进行调整。但是，当我获得背景图像以正确调整大小时，徽标图像不会改变大小。但是，当我能够让它们都调整大小时，徽标图像将会非常大并且覆盖整个屏幕的宽度。然后，当我将徽标图像的宽度更改为较小时，背景图像缩小至小于屏幕宽度。徽标和标题容器没有正确调整大小

这里是链接到我有问题的着陆页与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}

来源

2015-10-21 Dave

由于徽标分为两个元素，div header-holder和图像是不可能的。将说话的骰子放在图像和标题架中，并用背景大小：封面。 –

当我使用背景大小：封面时，说话模具的背景图像变得非常大以至于我无法再看到它。所以我不确定我是否理解了你的意思，但我确信我做错了。 – Dave

对不起，但在这一刻你的博客已关闭，所以我看不到代码。但是，在标头保持器背景中使用图像，您可以使用背景线性渐变。赫拉一个很好的发电机：http://www.cssmatic.com/gradient-generator –

写到这里的编辑器。

.container, 
#front_page_container { 
    width: 100% 
}

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

来源

2015-10-23 08:02:35

是的，我可以看到需要做很多额外的工作。我觉得我对现在的样子很满意，就像它只是暂时的。非常感谢你们的帮助。 – Dave

不客气。我也喜欢d20：D –

徽标和标题容器没有正确调整大小

回答

相关问题