Question

我刚开始学习代码并尝试制作我的第一个投资组合页面项目。

对不起，如果这是一个经常重复的问题。我试图在这个问题上搜索答案，发现一些结果让我非常接近但不完全在那里，我现在想知道这是否可行。

我想使用一个图像作为我的标题，但我想让整个图像适合整个页面而不会像我在背景大小时使用'cover'选项那样裁剪。我也试过包含，但这并没有填满整个空间。

我的codepen链接：https://codepen.io/Lofu/pen/yXPemm

我想要选择的HTML：

@echo f2ea3410        device
@echo f2fa3410        device

我的造型：

`<div class="page-header"></div>`

是否可以在整个标题中拉伸和调整整个图像，使其看起来仍然相对不错？

感谢任何帮助。谢谢！

Answer 1

你也可以试试这个：

.page-header
{
    background-image: url("enter here your img path");
    width: auto;    
    text-align: center;
    margin: 0;
    padding: 0;
    height: 0;
    padding-top: 18.0082%; /* (img-height / img-width * container-width%) */
    background-size: contain;
    background-repeat: no-repeat;
}

您只需要 img-height 和 img-width ，容器宽度（％）为100 。然后你使用正式，你可以在padding-top后面看到评论，并用你的结果取代18.0082％。

让我知道它是否适合你。

将图像缩放到标题中

1 个答案: