css - 对于有背景图片的 的响应式布局 怎么来写

问题描述

类似这种 我现在想要做一个component 有背景图 但是背景图不能百分百大小 然后中间还要有内容 左边图片 右边文字 如何来做响应式

问题解答

试试 background-size: cover;

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

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

我平时会用到 2 种方案：

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

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

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

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

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