在 Wordpress 中制作完整的浏览器 window 响应图像

Question

我正在进行编码的第一步。我在 Codeacademy 上了一些课程，现在我决定在构建 Wordpress 子主题的同时继续从经验中学习。

问题是我想在我的主页上有一个响应式背景图片。我知道我可以在自定义部分选择背景图片，但我认为如果我学习如何使用自定义字段来做这件事会很好。像这样，我还可以选择我想要哪些页面有背景图片。

据我所知，我必须在我的页面模板中写这个，但它不起作用：

<div style="background-image: url('<?php the_field('custom_field_name'); ?>');">

有没有办法在 Wordpress 中使用自定义字段来实现这一点？:

<div style="background-image: url('http://absolute/path/to/img.jpg');">

我已经为此工作了一个星期，但找不到解决方案，所以我决定用传统方式添加我的字段：

<div id="imghome"><?php the_field("images"); ?></div>

然后使用这个 css:

#imghome img {
    height: auto;
    position: fixed;
    top: 0;
    left: 0;
    min-width: 100%;
    min-height: 100%;
    margin:0px;
    background-repeat: no-repeat; 
}

像这样我可以看到我的图片更大，但它并没有完全填满浏览器window。

你有什么建议吗？

Answer 1

如果您使用的是 img，则背景属性将不适用于它。尝试使用它，它相当于图像元素的背景覆盖：

-o-object-fit: cover;
object-fit: cover;

如果单独这样做不起作用，请尝试更改您的 height/width。如果你加上right和bottom，图像将占据4个点之间的所有space：

#imghome img {
height: auto;
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
min-width: 100%;
min-height: 100%;
margin: 0px;
-o-object-fit: cover;
object-fit: cover;
}

在 Wordpress 中制作完整的浏览器 window 响应图像

Making a full browser window responsive Image in Wordpress

html

css

php

wordpress

advanced-custom-fields