移动设备上的img页眉向下推送文本

Question

我正在尝试编辑wordpress主题。我将标题h1更改为img以显示徽标。它在电脑上看起来不错，但在手机上，它做了一些奇怪的事情，以至于背景图像显示在徽标和导航栏之间。

您可以在此处查看：http://www.juicecrawl.com/blog

任何关于如何缩放徽标图像的想法，使其适用于计算机&可移动的

谢谢！

Answer 1

将媒体查询中.site-header的background-size更改为cover，而不是768px auto。

@media (max-width: 767px) {
 .site-header {
     // background-size: 768px auto;
     background-size: cover;
 }
}

Answer 2

在这个小分辨率下，css正在缩小背景图像的大小以适应屏幕。您可以将标题区域中的背景大小设置为"cover"，也可以将背景图像设置为"none"以在移动设备中消除它。你还想让你的标志反应灵敏。要做到这一点，首先从"img"中删除height="100px"，然后使用css。

/*set height of the image to 100px*/
.site-header h1 img {height:100px;}
/*for mobile, set background-size to cover and set the logo to have a max width of 100% so that it fits on the screen*/
@media (max-width: 359px) {
  .site-header {
    background-size: cover;
  }
  .site-header h1 img {max-width:100%;height:auto}
}