类似这种 我现在想要做一个component 有背景图 但是背景图不能百分百大小 然后中间还要有内容 左边图片 右边文字 如何来做响应式
走同样的路，发现不同的人生
试试 background-size: cover;
background-size: cover;
background-position，和background-size配合使用，试过没
你可以仔细研究下 Apple 的一些页面，它的一些页面就是使用了背景图片且自适应的 —— 当然，它的布局也相对简单。它的原理是就是 CSS3 Media Query。
我平时会用到 2 种方案：
12 列栅格布局系统（宽度、浮动、顺序响应）；
Media Query 适配（使用 position 属性或 flex 布局、字号、适配的省流图片）；
position
flex
如果是组件开发的话，你仍可以使用 props 来定义好行内参数，然后 component 内部判断排版样式（预设几种版式）；
props
对于背景图片，你可以使用 background-size 或 background-position: center center 属性来实现图片自适应显示（自动填充），也可以使用 Media Query 指定不同的设备上显示的不同（如：desktop 图片宽大于高、mobile 竖屏图片高大于宽）图片（节省流量）。
background-size
background-position: center center
我觉得：尽量不要用背景来作为内容版式的一部分，除非设计师给你提供了足够的图片适配尺寸和方案！
试试
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 竖屏图片高大于宽）图片（节省流量）。我觉得：尽量不要用背景来作为内容版式的一部分，除非设计师给你提供了足够的图片适配尺寸和方案！