Question

我和我的团队正在为射箭比赛建立一个网站。我们希望将我们的徽标用作header，但图像已经给我们带来了麻烦：图像不会调整大小以适应我们的需要并且在容器内部保持重复。现在，我们不是巫师，但我们一直在寻找答案。我们在这个网站上找到了许多关于调整标题图像大小的解决方案，但由于我们的容器大小是全相关的，我们发现的解决方案都是aboslute，因此它们都不适用于我们的问题。我的意思是我们在CSS中的容器大小都是相对的，但在解决方案中，它们不是。

这是我的CSS工作。

#header {

    background-image:url('../files/ifaa_dutch_open_logo.jpg');
    height: 40%;
    width: 96%;
    top: 2%;
    left: 2%;
    border-radius:15px;
    float:center;
    position:relative;

}

这是相应的HTML代码：

<div id="header"></div>

为了进一步说明发生了什么，这是一张图片： The picture

这里有什么问题？我们希望图像调整大小以适应容器，但它不会。这个比例似乎并不重要，因为我也在一个新的页面上尝试过它，图像正好是容器的1/4，它只会在每个角落显示四张图片。

我们做错了什么，我们如何解决这个问题？

Answer 1

我认为，你的主要问题是图像正在重复，因此无法正确装入容器。尝试：

private static final Logger log = LoggerFactory.getLogger(${enclosing_type}.class);

当容器边距都是相对的时，标题（背景）图像不会调整大小

1 个答案: