移动设备上的 img 标头下推文本答案

【问题标题】：img header on mobile pushes down text移动设备上的 img 标头下推文本
【发布时间】：2015-10-07 12:23:15
【问题描述】：

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

您可以在这里查看：http://www.juicecrawl.com/blog

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

谢谢！

【问题讨论】：

标签： html css wordpress

【解决方案1】：

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

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

【讨论】：

【解决方案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}
}

【讨论】：

谢谢，我正在使用主题子 .css 进行编辑，当我将此代码复制到子 css 中时，它似乎并没有覆盖主题设置。我没有看到任何变化。
好的，我可以在您的“twentythirteen-child/style.css”文件中看到它。问题是它在关闭标记之前被其他一些 css 覆盖。
现在，在您弄清楚如何在结束标记之前编辑该 css 之前，请在 css 上使用“！important”。例如 .site-header h1 img {max-width:100% !important;height:auto !important}
谢谢！我在一个额外的 header.php 中找到了 css 并将其删除。使用子主题的原因是为了防止未知的变化。你认为更新会导致它再次被删除吗？ !important 仍然没有覆盖，所以我认为最好的办法是删除。