文章/答案/技术大牛

发布

社区首页 >问答首页 >绝对位置子分区在流体母体中

问绝对位置子分区在流体母体中
EN

Stack Overflow用户

提问于 2015-07-15 15:36:23

回答 1查看 283关注 0票数 5

我试图在地图上放置一个指针，该指针将始终位于div父节点的相同位置。这是小提琴- https://jsfiddle.net/mfgdp3j3/

这样做的目的是让引脚始终保持在图像/浏览器更改大小的同一个位置，因此，如果浏览器是1000 in = pin相同的点，就好像地图是350 in(我指的是图像上的位置)。

快速代码：

<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%}

html

css

position

回答 1

Stack Overflow用户

回答已采纳

发布于 2015-07-15 15:57:15

1.如果您想保持图标的宽度，即使在较小的屏幕中也是如此。

您可以使用transform:translate(-50%,-100%)，然后调整left和top百分比值来定位图标。

小提琴：https://jsfiddle.net/mfgdp3j3/14/

2.如果您希望图标根据屏幕大小调整大小.

此外，当您调整大小时，您可以设置一个min-width和max-width，如果您觉得图标大小太大/太小。

小提琴：https://jsfiddle.net/0yozs4tr/

3.如果您希望图标与图像一起调整大小

将图标的宽度设置为百分比(大约24%)。在这种情况下，在较小的屏幕大小中，图标看起来可能太小。

小提琴：https://jsfiddle.net/mfgdp3j3/18/

票数 3

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/31434882

复制

相似问题

问绝对位置子分区在流体母体中
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问绝对位置子分区在流体母体中EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问绝对位置子分区在流体母体中
EN