html div图片定位,css将div定位到图片上的固定位置

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

background-size:contain

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

谢邀，这种东西根本不需要啥背景图。

写了个demo，点开看css代码和直接预览效果。

https://jsfiddle.net/vpgL5535/

我理解的话，“放大缩小都会刚好限制在手机屏幕内”指的是宽度适应，如果是要用图片背景的话，可以考虑用百分比布局。参考代码如下(略去不重要的部分)：

</div>

.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;

来使背景图始终缩放至宽度和外层div一致，并保持宽高比。

padding: 13.77% 14.13% 0;

取的分别是手机模型屏幕区域到背景图边缘的距离，从

值转换为百分比值(比例通过像素值除以图片像素宽度得到)

(可选)

max-width: 559px;

使外层div不至于超出背景图大小(背景图尺寸为

753 x 559

)，

min-height

使内容较少的时候也能看到整个手机模型。

配色挺漂亮，嚯嚯嚯。

这个黑色线框可以直接写成“手机的”子元素。放在内部用百分比的宽高来控制一下大小，就能自适应了。

如：

.phone div {

width: 80%;

height: 80%;

margin: 0 auto;

margin-top: 10%;

}

html div图片定位,css将div定位到图片上的固定位置相关推荐

html设置表格和div的距离,CSS/HTML Div调整大小和表格定位
我有3个div,父div,子div在顶部,另一个在底部.任何帮助将不胜感激,这里是我想达到的目标:CSS/HTML Div调整大小和表格定位当顶格调整大小/增加其大小,包含表将缩小,但保持在其位置上 ...
css怎样锚定位,CSS：如何定位内部锚
跨度或DIV我有这种情况:CSS:如何定位内部锚 Notifications 这将产生以下: a.messages{ background: url(../img/Footer/iconMail.pn ...
css定位页面元素,页面元素定位-CSS元素基本定位
基本定位 """属性定位一 """ # #通过id # driver.find_element_by_css_selector(" ...
html语言div什么意思,css中div是什么意思？
css中div是什么意思? div是html中的一个标签,通常作为容纳其他元素的容器.在css中,表示一种选择器,可以直接使用div(标签选择器)来查找HTML元素设置样式:而如果是.div那么表示某 ...
html中盒子的定位,css盒子的定位有哪些方法？
所有HTML元素可以看作盒子,在CSS中,"box model"这一术语是用来设计和布局时使用.CSS盒模型本质上是一个盒子,封装周围的HTML元素,它包括:边距,边框,填充,和实 ...
html div 居中心,CSS实现DIV居中的三种方法
下面给大家分享div居中的实现代码,具体代码如下所示: demo .div1{ width: 100px; height: 100px; border: 1px solid #000000;} .di ...
css 让div悬浮,纯CSS实现DIV悬浮(固定位置)
纯CSS实现的DIV悬浮效果(固定位置),兼容常用的浏览器:IE8.360.FireFox.Chrome.Safari.Opera.傲游.搜狗.世界之窗等.效果如下: 实现代码: DIV悬浮示例-纯C ...
php鼠标悬停显示图片,HTML CSS 实现鼠标悬停时图片拉近效果
前言为了让网页的使用体验更好,我们会让网页的某些元素对鼠标的动作做出响应.例如鼠标滑过.单击按钮的时候按钮变色.变形.之前在很多网页上看到了鼠标滑过一个图片链接时图片放大.拉近的效果,今天尝试实现一 ...
html表格背景图片格式,css背景颜色、背景图片，以及列表的多种样式
背景样式 • background-color 设置元素的背景颜色. • background-image 把图像设置为背景. • background-position 设置背景图像的起始位置. • ...

html div图片定位,css将div定位到图片上的固定位置

html div图片定位,css将div定位到图片上的固定位置相关推荐

最新文章

热门文章