問題描述

如圖我有個總的大p，寬度和高度都是不定的，里面的手機線框是背景圖，用的

background-size:contain

定位的，黑框是我想要操作的p，想讓他能覆蓋手機模型的屏幕，而且放大縮小都會剛好限制在手機屏幕內，該怎么定位呢，能不能實現(xiàn)？

問題解答

謝邀，這種東西根本不需要啥背景圖。

寫了個demo，點開看css代碼和直接預覽效果。https://jsfiddle.net/vpgL5535/

我理解的話，“放大縮小都會剛好限制在手機屏幕內”指的是寬度適應，如果是要用圖片背景的話，可以考慮用百分比布局。 參考代碼如下（略去不重要的部分）：

<p class='frame-container'> <p class='screen-container'> <!-- content here --> </p></p>

.frame-container{ max-width: 559px; min-height: 753px; padding: 13.77% 14.13% 0; background: url(frame.jpg) no-repeat; background-size: 100% auto; box-sizing: border-box;}.screen-container{ padding: 10px; /* 可選，在屏幕范圍內仍然增加一點間距比較美觀 */}

對應的結果是：

其中的要點是：

background-size: 100% auto;來使背景圖始終縮放至寬度和外層p一致，并保持寬高比。

padding: 13.77% 14.13% 0;取的分別是手機模型屏幕區(qū)域到背景圖邊緣的距離，從px值轉換為百分比值（比例通過像素值除以圖片像素寬度得到）

（可選）max-width: 559px;使外層p不至于超出背景圖大小（背景圖尺寸為753 x 559），min-height使內容較少的時候也能看到整個手機模型。

配色挺漂亮，嚯嚯嚯。

這個黑色線框可以直接寫成“手機的”子元素。放在內部用百分比的寬高來控制一下大小，就能自適應了。如：

.phone p { width: 80%; height: 80%; margin: 0 auto; margin-top: 10%;}