wordpress 显示完整图像答案

【问题标题】：wordpress display the full imagewordpress 显示完整图像
【发布时间】：2018-02-28 01:15:43
【问题描述】：

使用 wordpress，我创建了一个您可以看到 here 的页面，请访问 Schoonmaakwerk is mensenwerk，您可以看到它看起来像这样：

虽然图像是这样的：

我希望能够显示完整的图像。这是我的图像部分代码：

    #mainSchoonMaker { 
  background: url(https://www.haagsehof.nl/content/uploads/2018/02/20171120_Haagsehof_1300_blackoverlay.jpg); 
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

如果我添加 no-repeat，图像就消失了。我希望这张图片能够滚动并随着页面的滚动而上升和下降，有人知道如何做到这一点吗？

【问题讨论】：

if I add no-repeat the image is gone. 什么意思？
@vel 如果我补充说图像被替换为白色背景。对于这部分，我不能让图像可以滚动，也不能变成原来的样子。我是否清楚我想要发生的事情？
你要将图片添加到正文中吗？
是的，像这样：` #mainSchoonMaker { 背景：url(haagsehof.nl/content/uploads/2018/02/…) no-repeat center center fixed; -webkit-background-size：封面； -moz-background-size：封面； -o-background-size：封面；背景尺寸：封面； } `
似乎工作正常。有什么问题？

标签： css wordpress wordpress-theming

【解决方案1】：

试试这个：

#mainSchoonMaker { 
  background: url(https://www.haagsehof.nl/content/uploads/2018/02/20171120_Haagsehof_1300_blackoverlay.jpg); 
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: auto;
}

【讨论】：

这给出了一个不完整的图像！

【解决方案2】：

试试这个代码。

    @media (min-width:767px){
    #pl-4 {
        background: url(https://www.haagsehof.nl/content/uploads/2018/02/20171120_Haagsehof_1300_blackoverlay.jpg) no-repeat center center;
        -webkit-background-size: 100%;
        -moz-background-size: 100%;
        -o-background-size: 100%;
        background-size: 100%;
        margin-left: -15px;
        margin-right: -15px;
    }
}


@media (max-width:768px){
    #pl-4 {
        background: url(https://www.haagsehof.nl/content/uploads/2018/02/20171120_Haagsehof_1300_blackoverlay.jpg) no-repeat center center;
        -webkit-background-size: cover;
        -moz-background-size: cover;
        -o-background-size: cover;
        background-size: cover;
        margin-left: -15px;
        margin-right: -15px;
    }
}

【讨论】：

你想要这样吗？空间很小。我们稍后会修复。
为#pl-4 添加并从#mainSchoonMaker 中删除
是的，图片左右两边都有空格，当你用手机看那个部分时，图片丢失了。
感谢它适用于电脑，但对于移动版没有图像，无论如何也可以解决这个问题？
非常感谢，你能用 chrome 打开这个网站吗？那里的设计似乎有些不同！

【解决方案3】：

您是否在处理主题中的特色图片？

如果是这样，问题实际上可能出在主题中特色图片的代码中。缩略图（特色图片）的大小可以在 WordPress 网站的媒体设置中确定，但特色图片的大小也可以通过函数手动指定。这是此类内置函数的开发人员文档。

https://developer.wordpress.org/themes/functionality/featured-images-post-thumbnails/

图像可能最终尺寸错误，因为 WordPress 会根据您的媒体设置或特定主题的功能自动为您提供自定义尺寸。

【讨论】：