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

标签 html css image

我一直在努力让我的公司 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}

最佳答案

在这里写给编辑。

.container,
#front_page_container {
    width: 100%
}

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

关于html - Logo 和标题容器未正确调整大小,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/33250672/

相关文章:

c# - itextsharp.xmlworker 可以渲染嵌入的图像吗?

html - 如何将 li 元素作为 GridView 居中

javascript - 图像悬停生成器

javascript - 如何停止页脚上方的div

wordpress - 外部视频播放器的 Z-index 问题

java - 第二次加载后位图大小超出虚拟机预算

html - 如何仅使用 HTML CSS 制作 UL 选项卡

css - WordPress 响应主题没有完全响应

css - 网页大小调整中断菜单项

javascript - 图片加载像 google image PHP