css3 - css将div定位到图片上的固定位置

Question

如图我有个总的大p，宽度和高度都是不定的，里面的手机线框是背景图，用的

background-size:contain

定位的，黑框是我想要操作的p，想让他能覆盖手机模型的屏幕，而且放大缩小都会刚好限制在手机屏幕内，该怎么定位呢，能不能实现？

Answer 1

Thank you, this kind of thing doesn’t need a background image at all.

Written a demo, click on it to see the css code and preview the effect directly.
https://jsfiddle.net/vpgL5535/

Answer 2

From what I understand, "zooming in and out will be just limited to the phone screen" refers to width adaptation. If you want to use a picture background, you can consider using percentage layout. The reference code is as follows (omitting unimportant parts):

<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;  /* 可选，在屏幕范围内仍然增加一点间距比较美观 */
}

The corresponding result of

is:

The key points are:

• background-size: 100% auto; to make the background image always scale to the same width as the outer p and maintain the aspect ratio.

• padding: 13.77% 14.13% 0; takes the distance from the mobile phone model screen area to the edge of the background image, and converts the px value into a percentage value (the ratio is obtained by dividing the pixel value by the image pixel width)

• (optional) max-width: 559px; so that the outer p does not exceed the size of the background image (the background image size is 753 x 559), min-height so that the entire phone model can be seen even when the content is small.

Answer 3

The color scheme is quite beautiful, wow.

This black wireframe can be directly written as a "mobile phone" sub-element. Put it inside and use the percentage width and height to control the size, and it will be adaptive.
For example:

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