背景图像没有响应答案

【问题标题】：Background Image is not being responsive背景图像没有响应
【发布时间】：2020-09-25 11:52:41
【问题描述】：

在响应式网页设计期间，我注意到每当我将宽度减小到低于 1140 像素（行宽）时，背景图像（页眉和评论）、背景颜色（页脚）和图像（膳食照片部分）都会缩小到更小的尺寸并且不覆盖浏览器的 100% 宽度。

请检查代码，让我知道代码中的问题。

我在最后附上了问题图片链接。

链接：

Github：https://github.com/toth2000/Web-Page

Issue Image Link

【问题讨论】：

您好，欢迎来到 StackOverflow。请花一些时间阅读帮助页面，尤其是名为"What topics can I ask about here?" 和"What types of questions should I avoid asking?" 的部分。此外，请阅读Stack Overflow question checklist。还可以了解如何发帖Minimal, Complete, and Verifiable Examples。
您在主题上，但是，您需要发布您正在使用的相关代码。

标签： html css

【解决方案1】：

.row 的固定宽度为 1140 像素存在溢出。此外，在 twitter 链接上发生溢出。除此之外，对于较小的屏幕尺寸，h2 会发生另一个溢出。对.row、h2 和.twitter-link 进行这 3 项更改后，它将适用于 245 像素以上的屏幕占用。

style.css

.row {
    width: 100%; /* Change from 1140px to 100% */
    margin: 0 auto;
}

.twitter-link {
    margin-bottom: auto;
    margin-top: auto;
    text-decoration: none;
    color: #e98310;
    transition: border 0.2s;
    word-break: break-word; /* Add word-break */
}

h2 {
    margin-top: 80px;
    margin-bottom: 40px;
    font-size: 200%;
    font-weight: 350;
    text-align: center;
    text-transform: capitalize;
    word-break: break-word; /* Add word-break */
}

屏幕尺寸低于 245 像素的剩余溢出是 img.app-photo，我们可以通过媒体查询将宽度从自动强制设置为 100%。

style.css

@media screen and (max-width: 245px) {
  .app-photo {
    width: 100%;
  }
}

【讨论】：

感谢您的帮助。它解决了这个问题。
@TothagataBhattacharjee 很高兴为您提供帮助 :)

【解决方案2】：

当然不会是 100%。因为你让父母的 div 比你的孩子小。孩子长大了，父母就管不了了。如果您使用引导程序，请使用容器和 cols 使 em 处于良好的位置并做出响应。我会让你的一个部分做出响应，然后你就可以理解问题所在了。最有趣的一点是你只有在检查时才有问题。！

【讨论】：