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

Question

网站网址：已删除

你好呀，

如何通过 CSS 使我在 Squarespace 上的登录页面响应不同的屏幕尺寸？它非常适合移动视图、桌面和大屏幕。但它在桌面和移动视图之间看起来并不好。徽标太大或横幅未全宽，因此在右侧被切断（见屏幕截图）。

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

感谢您的帮助！

标签： cssresponsivetabletsquarespacescreen-size

Answer 1

您必须解决的选项是：

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

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

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

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

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