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

【问题标题】：Responsive image not responding the way it should响应式图像未按应有的方式响应
【发布时间】：2018-08-22 03:56:51
【问题描述】：

我创建了一个标题中带有背景图片的网站。我将图像放在 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;
}

谢谢！

【问题讨论】：

看起来它正在根据background-size:contain; 工作。似乎出了什么问题，而您想要的行为是什么？
@showdev 如果您调整窗口大小，您会看到图像从一侧正确地缩小到另一侧。但是，您会在图像的顶部和下方看到蓝色空间。我希望图像也能达到全高。
@showdev 这里是截图：dropbox.com/s/a4z6yo93k1dq5mz/…
background-size:contain 就是这样做的。也许你更喜欢cover？ Example here.
@showdev 再次感谢，但它仍然不起作用。我想我会暂时保留它，直到该网站的下一个版本很快发布 :) 无论如何谢谢！

标签： html image css responsive

【解决方案1】：

您将.introduction-button 上的padding: 20px 更改为padding: 2% 是什么？应该大致根据您的需要进行扩展。

【讨论】：

background-size: cover vs contain 应该也可以，这取决于你有多挑剔。
谢谢。还是行不通。还有其他想法吗？我没主意了！ :)
我没有； background-size: cover 在我查看时有效，如果您需要获得超级具体的结果，则必须对您想要的结果进行 Photoshop 处理，因为 cover 将取出您标记的空白蓝色空间。
如果我要在 Photoshop 中编辑图像，图像必须有多大？谢谢。

【解决方案2】：

你应该添加到 css 中：

height: auto;

【讨论】：

感谢@James，但它仍然不起作用。还有其他想法吗？

【解决方案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>

【讨论】：

谢谢！我已经解决了这个问题。我所做的是在 Photoshop 中创建一个更大的图像，它与上面的代码一起工作。谢谢！ :)
感谢您的回复:-)