问题描述
我在我的标题中看到我的图像下方有一个缺口，但不知道如何消除它。我正在使用模板和一些自定义 CSS，但在检查中看不到造成差距的原因以及如何消除它。如果您开始缩小浏览器窗口，在移动设备上查看它时很容易看到它。我怎样才能消除这个差距？
https://www.thecompleteapproach.co.uk/go/success-to-soar/
CSS：
body {
background-image: url(https://www.thecompleteapproach.co.uk/wp-content/uploads/2021/03/success-to-soar-banner-update.jpg);
background-repeat: no-repeat;
background-size: 100% auto;
width: auto!important; overflow-x: hidden!important;
background-attachment: fixed;
}
header{
max-width:100%;
height:100%;
}
.heading-row{
background-image: linear-gradient(to right,red,orange);
padding:20px;
text-transform: uppercase;
}
section {
max-width: 100%;
margin: 0 auto;
padding: 0;
}
h2{
margin-bottom: 0;
}
解决方法
在这种情况下，图片的纵横比与包装容器的纵横比不匹配。随着您的身体改变纵横比，您需要一个灵活的解决方案：
使用：background-size: cover
= 图像将拉伸到父包装器以覆盖整个
注意：在这种情况下可以剪切图像的某些部分。这可能会成为一个问题，即如果您从桌面视图更改为响应式视图到纵向视图。在这种情况下，您可以使用不同的背景图像。您可以使用 @media 为不同的视图/设备设置不同的图像。
更新评论问题
关于什么设备应该使用什么图像尺寸的问题基于两个标准：
- 基于视口宽度所需的质量
- 所需的两种特殊视图样式（即风景、肖像）
需要的质量意味着图像文件的大小应该尽可能小（因为我们想要快速加载时间）并且图像的分辨率足够高，因为 (a) 视口的宽度和 ( b) 设备的分辨率（因为我们想要显示清晰明亮的图片）。
这 (a) 表示：在 1.200 像素的视口宽度（即大型桌面屏幕）上，图像的宽度应为 1.200 像素。但是在较小的屏幕上，即屏幕宽度最大为 567px 的移动设备上，相同的图像只需要具有 567px 的宽度。因此，由于此示例准备两种尺寸的相同图像，并通过使用 @media( min-width: 1200px){} 将所需图像加载到不同的设备。
优化图像（= 断点）的实际典型步骤是：
X-小
注意：你在项目中服务的断点取决于项目，取决于布局、时间、......
因为这很容易，不同的设备具有 (b) 不同的屏幕分辨率。意味着现代小型设备可能具有更高的屏幕分辨率（ppi = 每英寸像素，即视网膜显示器）作为简单的桌面显示器（标准：92dpi）。因此，正如我们想要完美的那样：为现代移动设备提供清晰的图像意味着准备比更大的桌面屏幕具有更高分辨率（= 更多像素 = 更大图像尺寸）的图像。这可以通过 @media( min-resolution: 1200px){}
所需的样式意味着，如果在不同的设备/视口上显示相同的图像，则会产生不同的印象/感觉。因此，如果图像显示在大屏幕上可能很棒，但在较小的视口上您不喜欢它，因为不再显示细节。或者您想显示另一张图片，如果它在桌面屏幕上以横向模式显示，但在移动设备上以纵向模式显示。
因此，由于我们想要再次完美，我们选择在较小/较大的屏幕上显示不同的图像，并在横向/纵向模式下显示不同的图像。即使这可以通过 @media(orientation: landscape){}
更多信息
在第一个视图中，这一切确实有点复杂。还有一些额外的技术可以处理它。但请注意：并非所有这些完美的图像处理都在任何项目中使用......但在实际编码中，少数几个有足够资源（时间、设计能力、客户喜欢为工作出售的金钱）来实现大部分他们是最好的一个;-)
以下是对该主题的一些很好的解释（响应式图像处理）：
https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries
https://developer.mozilla.org/en-US/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images
https://elad.medium.com/a-complete-guide-for-responsive-images-b13db359c6c7