0

我在标题中看到图像下方有一个空白，但不知道如何消除它。我正在使用模板和一些自定义 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;
}
4

1 回答 1

0

在这种情况下，图像的纵横比与包装容器的纵横比不匹配。当您的身体改变纵横比时，您需要一个灵活的解决方案：

使用：background-size: cover
=图像将拉伸到父包装以覆盖整个

注意：在这种情况下，可以剪切图像的某些部分。这可能会成为一个问题，即如果您从桌面视图更改为响应视图再到纵向视图。在这种情况下，您可以使用不同的背景图像。您可以使用@media为不同的视图/设备设置不同的图像来执行此操作。

更新评论问题

关于什么图像尺寸应该用于什么设备的问题基于两个标准：

  1. 基于视口宽度的所需质量
  2. 所需的样式两个特殊视图（即风景，肖像）

需要的质量意味着图像文件的大小应该尽可能小（因为我们想要快速的加载时间）并且图像的分辨率由于（a）视口的宽度和（b）设备的分辨率（因为我们想要显示清晰而绚丽的画面）。

这 (a) 意味着：在 1.200 像素的视口宽度（即大桌面屏幕）上，图像的宽度应为 1.200 像素。但在较小的屏幕上，即屏幕宽度最大为 567px 的移动设备上，相同的图像只需要具有 567px 的宽度。因此，由于这个示例准备了两种尺寸的相同图像，并通过使用@media( min-width: 1200px){}不同的设备加载所需的图像。

优化图像（=断点）的实际典型步骤是：

X-Small <576px Small ≥576px Medium ≥768px Large ≥992px Extra large ≥1200px Extra Extra large ≥1400px

注意：您在项目中服务的断点取决于项目，并且取决于布局、时间、...

由于这很容易，因此不同的设备还具有 (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

于 2021-03-27T16:32:00.700 回答