如何使横幅部分中的横幅和图像响应不同的屏幕尺寸例如平板电脑

问题描述

网站网址:已删除

你好,

如何通过 CSS 使我在 Squarespace 上的登录页面响应不同的屏幕尺寸? 它非常适合移动视图、桌面和大屏幕。 但它在桌面和移动视图之间看起来并不好。 标志太大或横幅不是全宽,所以它在右侧被切断(见屏幕截图)。

logo image too big

banner cut off/not full width

有谁知道我需要什么代码才能以全宽显示横幅并避免横幅部分中的徽标(图像)在某些屏幕尺寸上变得太大?

感谢您的帮助!

解决方法

解决这个问题的选项是:

  1. 从图像中删除右侧的数字/文本并上传不带数字/文本的新图像。通过代码块添加数字/文本并使用 CSS 将其绝对定位在该部分中,并将其锚定到右侧。

  2. 将图像的锚点一直设置到右侧。这将始终保持数字/文本可见并避免将其切断。然而,这意味着建筑物通常不会出现在视野中,而且我认为建筑物是焦点,所以这可能不是一个好的选择。

  3. 稍微重做图形,使右侧的数字/文本更靠左,更多地向中间浮动,避免在切换到移动设备之前在大多数设备上被裁剪并且该部分隐藏在支持移动特定部分。

  4. 使用 CSS 完全覆盖焦点并强制图像锚定到右侧,如下所示:

    [data-section-id="5fc3e08408845d092400c576"] .section-background img {
      object-position: 100% 50% !important;
    }