html – 绝对定位流体父级内的子Div
发布时间:2020-12-14 23:26:58 所属栏目:资源 来源:网络整理
导读:我试图将一个指针放在一个始终位于div父级的同一位置的地图上.这是小提琴 – https://jsfiddle.net/mfgdp3j3/ 这个想法是让图钉/浏览器的尺寸始终保持在同一位置,所以如果浏览器是1000px = pin相同的点,就像地图是350px一样(相同的点我的意思是图像上的位置)
我试图将一个指针放在一个始终位于div父级的同一位置的地图上.这是小提琴 –
https://jsfiddle.net/mfgdp3j3/
这个想法是让图钉/浏览器的尺寸始终保持在同一位置,所以如果浏览器是1000px = pin相同的点,就像地图是350px一样(相同的点我的意思是图像上的位置). 快速代码: <div id="main_container"> <div id="map_container"> <img id="map_image" src="https://familysearch.org/learn/wiki/en/images/0/06/Illinois-county-map.gif"> <img id="pin_it" src="https://cdn1.iconfinder.com/data/icons/Map-Markers-Icons-Demo-PNG/128/Map-Marker-Ball-Chartreuse.png"> </div> </div> *{margin:0;padding:0} html{position:relative;} #main_container {max-width:1000px;} #map_container {width:100%; position:relative;padding:0; margin:0} #map_image {width:100%; padding:0; margin:0} #pin_it{position:absolute; top:10%; left:10%} 解决方法
1.如果要保持图标的宽度不变,即使在较小的屏幕中也是如此.
您可以使用transform:translate(-50%,– 100%),然后调整左和上百分比值以定位图标. 小提琴:https://jsfiddle.net/mfgdp3j3/14/ 2.如果要根据屏幕大小调整图标大小. 另外,如果在调整大小时感觉图标大小太大/太小,则可以设置最小宽度和最大宽度. 小提琴:https://jsfiddle.net/0yozs4tr/ 3.如果您希望图标与图像一起调整大小 以百分比形式设置图标的宽度(类似于24%).在这种情况下,图标在较小的屏幕尺寸中可能看起来太小. 小提琴:https://jsfiddle.net/mfgdp3j3/18/ (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |