Question

所以我看到了这个问题的答案，但是它们似乎在我的网站上不起作用。

为什么我的背景图片不能覆盖整个div？当我减小屏幕宽度时，元素会变长，但部分背景保持不变。

道歉了很多代码，但我认为最好显示整个图片。

在此先感谢您的帮助。

html

CSS

<section class="about">
        <div class="row">
            <h2 id="trabajo">Cómo trabajo</h2>
            <p id="about-subheading">Déjame adivinar cómo quieres tu trabajo…</p>
        </div>

        <div class="about-container">
            <div class="col a"></div>
            <div class="col b">
                <i class="fas fa-plane"></i>
                <h3 class="about-h3">¿Lo quieres rápido?</h3>
                <p class="about-p">Una virtud que destaca en mí es mi lealtad por mi trabajo. Me gusta ser rápida contestándote y entregándote la
                grabación de tu proyecto.</p>
            </div>
            <div class="col c">
                <i class="fas fa-trophy"></i>
                <h3 class="about-h3">¿Quieres profesionalidad?</h3>
                <p class="about-p">La rapidez no es suficiente si no mantienes una ética de trabajo completa. Cuando amas lo que haces los clientes lo
                notan. ¡Echa un ojo a las opiniones de mis clientes!</p>
            </div>
            <div class="col d">
                <i class="fas fa-dollar-sign"></i>
                <h3 class="about-h3">¿Quieres un precio justo?</h3>
                <p class="about-p">Dependiendo del tipo de proyecto que tengas, el precio y la entrega variarán, ¡pero siempre será un precio justo y
                adaptado para ti!</p>
            </div>
            <div class="col e"></div>
        </div>

        <div class=row>
            <p class="your-voice">¡Entonces soy tu voz!</p>
            <div class="btn-container">
                <a href="#" class="quote">¡Pide tu presupuesto!</a>
            </div>
        </div>

    </section>

这很新，所以在此先感谢：）

这是图片

Answer 1

我复制并粘贴了您的代码以对其进行测试。使用您提供的代码，您的图像覆盖了整个<div>，在<div>之间没有笨拙的空白。

当我进入firefox浏览器的响应式设计模式时，我正在使用（右键单击屏幕->检查元素->转到弹出的窗口的右上按钮，或ctrl + shift +在窗口上为M） ...当我将高度设置为800像素宽乘以450像素高时，您将其设置得越宽，图像就会根据您的需要开始按长度方向扩展。

原因是因为您有background-size: cover; ，它会调整背景图片的大小以覆盖整个容器 如果它必须拉伸图像或从边缘之一上切掉一点。

我有一个1920x1080 px的屏幕，尽管高度在屏幕的最大宽度之前不久就扩展了，但同样的原理也发生在响应式设计模式之外。除了那个小的扩展窗口之外，图像一直保持相同大小，直到我的浏览器窗口尽可能薄为止，这又是由于background-size: cover;而引起的，大约是250px。许多图像也被切除。您可以阅读有关该属性here.

的更多信息

除了我上面所说的以外，如果您的图像没有像我所说的那样在高度上扩展，那么您的问题很可能来自其他继承的css类，您需要证明该类对您有帮助调试它。因此，请检查<section>标签所在的任何包含元素的css类。

另一个提示：您在这里只给出了1张图片，但您的单词听起来好像有很多。由于您的.about类是position: fixed;，因此只会显示该图像。如果您希望任何其他图像以相同的固定位置以自己的<div>的形式显示，则需要复制/粘贴原始类，但要稍稍更改名称，然后将图像路径更改为新的图片。

Answer 2

对于面临相同问题的任何人，我都已经解决了我的问题。

我刚刚将'height：100vh'更改为'min-height：100vh'，看来已经完成了！

为什么我的背景图片没有纵向扩展

2 个答案: