#類似這種 我現在想要做一個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 垂直螢幕圖片高於寬）圖片（節省流量）。我覺得：盡量不要用背景來作為內容版式的一部分，除非設計師給你提供了足夠的圖片適配尺寸和方案！