手机上的img标题按下文本

Question

我正在尝试编辑我的wordpress主题。我将标题h1更改为img以显示徽标。它在计算机上看起来很好，但在移动设备上，它正在做一些奇怪的事情，以便在徽标和导航栏之间显示背景图像。

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

有关如何缩放徽标图像以使其适用于计算机和计算机的任何想法移动？

谢谢！

Answer 1

将媒体查询中background-size的{​​{1}}更改为.site-header，而不是cover。

768px auto

Answer 2

在那么小的分辨率下，你的css缩小了背景图像的大小以适应屏幕。您要么在标题区域中将背景大小设置为“覆盖”，要么将背景图像设置为“无”以移除它。 您还希望使您的徽标响应。要做到这一点，首先从“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}
}