css – So schreiben Sie ein responsives Layout mit Hintergrundbildern

Question

Ähnlich möchte ich eine Komponente mit einem Hintergrundbild erstellen, aber das Hintergrundbild kann nicht 100 % groß sein. Dann muss sich in der Mitte ein Bild befinden reaktionsschnell

Answer 1

试试 background-size: cover;

Answer 2

background-position，和background-size配合使用，试过没

Answer 3

你可以仔细研究下 Apple 的一些页面，它的一些页面就是使用了背景图片且自适应的 —— 当然，它的布局也相对简单。它的原理是就是 CSS3 Media Query。

我平时会用到 2 种方案：

• 12 列栅格布局系统（宽度、浮动、顺序响应）；

• Media Query 适配（使用 position 属性或 flex 布局、字号、适配的省流图片）；

如果是组件开发的话，你仍可以使用 props 来定义好行内参数，然后 component 内部判断排版样式（预设几种版式）；

对于背景图片，你可以使用 background-size 或 background-position: center center 属性来实现图片自适应显示（自动填充），也可以使用 Media Query 指定不同的设备上显示的不同（如：desktop 图片宽大于高、mobile 竖屏图片高大于宽）图片（节省流量）。

我觉得：尽量不要用背景来作为内容版式的一部分，除非设计师给你提供了足够的图片适配尺寸和方案！