将图像缩放到标题中答案

【问题标题】：Scaling an image into the header将图像缩放到标题中
【发布时间】：2018-03-28 14:13:10
【问题描述】：

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

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

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

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

我要选择的 html：

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

我的造型：

.page-header {
    background-image: url(https://source.unsplash.com/o3TZx8_j7FE);
    background-position: 100%;
    background-size: cover;
    min-height: 50vh;
    max-height: 999px;
    width: 100%;
}

是否可以在标题中拉伸和调整整个图像以使其看起来相对美观？

感谢任何帮助。谢谢！！

【问题讨论】：

所以...您只是希望图像被拉伸/变形以确保它完全适合空间，即使纵横比不匹配？
您应该使用与标题的纵横比相匹配的图像，但如果您想使用相同的图像，您可以使用 background-size: 100% 100%;
嘿，我想看看我是否可以将它拉伸/变形到空间中。 background-size: 100% 100% along background-repeat: no repeat;成功了！不过，它看起来并不像我现在所期待的那样，因此可能不得不重新考虑这一点并找到与纵横比相匹配的图像。谢谢你们的帮助！
尝试使用边距：-22px 0px 21px;在 .page-header 中

标签： html css

【解决方案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% 替换为您的结果。

让我知道它是否对你有用。

【讨论】：

您好，谢谢您的建议。对不起，我只是有点迷路了。 img-height / img-width * container-width% 是公式吗？我发现属性为 img-height: 720px & img-width: 1080px。还是我应该计算图像的百分比？抱歉，如果答案非常明显，在这方面还是全新的
是的，你愿意（img-height / img-width * container-width）。对于您的值，它是：(720 / 1080 * 100) = 66,66%。所以 padding-top 现在是 66.66%。
谢谢！！这使它看起来比我拥有的更好！