响应式图像未按应有的方式响应

Question

我创建了一个标题中带有背景图像的网站。我将图像放在CSS样式表中。图像的宽度响应良好，但高度没有。您可以在此处查看网站： www.devcore.tech

这是我的 HTML：

<div class="introduction">
    <h1>Tecnología al alcance de todos.</h1>
    <form action="nosotros.html">
    <input class="introduction-button" type="submit" 
    value="Conócenos" />
    </form>
</div>

这是我的 CSS：

.introduction {
    width: 100%;
    margin: 0 auto;
    margin-top: 0px;
    background-color: #102a42;
    background-image: linear-gradient(0deg, #102a42 0%, #171c31 
    100%);
    background-image: url(../images/geometry.png); /* Image size 1280 x 1024px*/
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center center;
    text-align: center;
}

谢谢！

Answer 1

你在.introduction-button上将padding: 20px改为padding: 2%是什么？ 应该大致扩展到您的需要。

Answer 2

你应该添加到css：

height: auto;    

Answer 3

对于背景图像问题，请使用 background-size：cover css;

另外，参考这个小提琴。https://jsfiddle.net/korahlucky6/owst3j5k/1/

.introduction {
    width: 100%;
    margin-top: 0px;
    background-color: #102a42;
    background-image: linear-gradient(0deg, #102a42 0%, #171c31 
    100%);
    background-image: url("https://www.welovesolo.com/wp-content/uploads/2014/10/p16hh38qpn1ksms08j6e1c1r61d9-details.jpg"); /* Image size 1280 x 1024px*/
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
    text-align: center;
}

<div class="introduction">
    <h1>Tecnología al alcance de todos.</h1>
    <form action="nosotros.html">
    <input class="introduction-button" type="submit" 
    value="Conócenos" />
    </form>
</div>