如何使此图像正确显示？

Posted 2023-03-17

【中文标题】如何使此图像正确显示？

【英文标题】：How do I make this image show properly?

【发布时间】：2022-01-20 21:31:16

【问题描述】：

所以，我想让这张图片完整显示。到目前为止，这是我的代码：

链接：https://summit.tahaparacha1.repl.co/

html：

        <div class="header">
        <h1>Learn Mathmatics In Minutes!</h1>
        <h3>Increase your knowledge with Summit! Summit allows you discover the endless possiblities you probably thought never exsisted. Start learning for free at your own pace now, or scroll down to see what we offer.</h3>

        <a class="grow "href="#">Start Learning</a>
    </div>

CSS：

.header 
    background-image: url("images/SummitHome1.jpg");
    width: 100%;
    height: 100vh;

【问题讨论】：

请编辑您的帖子并制作a Minimal, Reproducible Example。

它似乎完全显示，但用户必须向上滚动，因为标题元素上方有空间。你能多描述一下你要求它看起来像什么吗？

【参考方案1】：

听起来您正在寻找background-size property。

虽然我不确定我是否充分理解您的愿望，但可以确定您想要哪些选项。 cover 或 contain ?

【讨论】：

啊，是的，但是它显示了更多具有“背景尺寸”的图像，但图像的底部仍然被切断。下面是它现在的样子：summit.tahaparacha1.repl.co

我认为这是因为你给它的高度为 100vh（这很好），但你在 .header 上也有很大的上边距，所以它全部向下移动。如果您执行.header margin: 0; 并（暂时）设置.nav opacity: 0.5 ，那么您可能会看到发生了什么。

谢谢，顶部的白框不见了，但我还是不知道图片有什么问题？你觉得可以看看我的repl吗？

我不确定您所说的“图像有什么问题”是什么意思，看起来并没有什么问题。它的显示方式可能与您想象的不同，但我不清楚这到底是什么方式。

嘿，谢谢！我在你不在的时候修好了，不过还是谢谢！