Responsive header images

时间：2018-10-29 作者：David Blomstrom

我刚刚建立了一个WordPress网站，但我的其他WordPress网站都有同样的问题：标题图像没有响应。不管屏幕有多小，它都有2000像素宽。

我尝试了各种修复，从添加自定义CSS到安装特殊插件，但都没有成功。

我最终通过选择不显示标题图像，然后打开文件标题来修复它。并手动在标题上方插入指向图像的链接。

它工作得很好，但有两个注意事项。

网站标题（在h1标签中）现在位于标题图像下方，而不是上方。此外，此修复程序仅适用于主页。我还没有弄清楚我要为其他页面做什么，除非我选择只在主页上使用标题图像。

所以在我继续之前，我想问一下，是否有一种简单的用户友好的方法可以使标题图像响应。

EDIT

我刚刚想出了如何使我原来的解决方案起作用。

首先，进入控制面板，选择不显示标题图像。然后在标题中手动插入图像。php，将其样式设置为宽度：100%。我把我的放在教室里。divImgHeader。

以下代码仅在主页上显示标题图像。

.divImgHeader { display: none; }
body.page-id-7 .divImgHeader {
    display: block;
}
然而，图像的顶部不会显示，显然是因为现在的空标题干扰了它。只需使用CSS来禁止标题。。。

body.page-id-7 header#masthead {
    display: none;
}
问题是你的主页上没有菜单。但是，您可以通过应用“显示”来解决此问题：对菜单以外的元素应用“无”；我还没试过呢。

另一个潜在的问题是，当您升级到下一个WP版本时，您可能不得不重新开始并重新进行。但如果你这样做了，第二次修复应该会容易得多。。）

3 个回复
最合适的回答,由SO网友:Dayley 整理而成

好吧，这个头球img有很多方面。我还拿走了所有我认为你不需要的垃圾。看看这是否有帮助，您可以通过将其从css中删除，始终将其添加回您想要保留的任何内容：

.has-header-image .custom-header-media img {
left: unset;
-o-object-fit: unset;
object-fit: unset;
-ms-transform: unset;
-moz-transform: unset;
-webkit-transform: unset;
translate: unset;
transform: unset;
top: unset;
-ms-transform: unset;
-moz-transform: unset;
-webkit-transform: unset;
transform: unset;
position: unset;
left: unset;
padding-bottom: unset;
-ms-transform: unset;
-moz-transform: unset;
-webkit-transform: unset;
transform: unset;

width: 100%;
height: auto;
min-width: 100%;
max-width:100%;
}

.has-header-image .custom-header {
display: block !important;
}

SO网友:Dayley

CSS是这里唯一的答案。

Two options:通过将像素数量/百分比设置为其宽度/高度，根据屏幕大小更改标题大小。或者，如您所述，宽度=100%。

我不确定你的标题在主题中的名称，但假设它被称为标题，那么在css中会是这样的：

.header img {
width: 100%;
}
如果您喜欢特定设备的特定尺寸，请尝试以下操作：

@media only screen and (max-width: 600px) {
.header img {
    width: 90%;
 }
}
这说明，如果媒体屏幕大小高达600px，仅此而已，请将图像宽度更改为90%。

你也应该尝试使用最大和最小宽度。您还可以尝试使用像素（虽然响应性不太好，但对于固定大小的像素通常更好）：

max-width: 95px;
min-width: 50%;
作为一个LAST 另一种选择是，如果没有按照要求进行，则尝试：

width: 100% !important;
但最好只这样做，以确定是否有一行代码过度编写了另一行代码。!important 使这条线在电源上超过任何其他同名的线。例如：

border: 2px solid blue;
border: 2px solid red !important;
是的！你的边界将是红色的。因为这条线更重要。

希望这有帮助！

SO网友:Dayley

试试这个css，它可以在Safari的Inspect元素中工作：

.has-header-image .custom-header-media img {
    width: 75%;
    min-width: 75%;
    max-width: 75%;
}

结束
标签： headers   小码农  

相关推荐

当我尝试登录时，我正在创建的插件出现‘Headers Always Sent’错误

我正在尝试创建我的第一个插件。到目前为止，它实际上工作正常，但有一个错误：当我尝试登录到wp admin时，会收到一条“Headers ready Sent”PHP消息。如果我从wpcontent/plugins目录中删除插件文件，像往常一样登录，然后替换插件文件，它工作得很好——这似乎只是在登录和注销时发生的。我的（缩写）代码是：<?php /* Plugin Name: Product Manager Plugin URI: http://www.tech-knowled