javascript - REACT - Child position with respect of scale of parent -
i have situation, have parent div in there can number of children divs, applying scale on parent div, since scale applied on parent looks child element displacing position, want children divs follow parent scale how manage situation, here portion of code..
<div classname="image-viewer"> <div classname="image-wrapper"> <div class="zoom-2 image-outer"> <img class="map-image" src="map.png"/> <div class="booth" style="left: 617px; top: 178px;"> </div> <div class="booth" style="left: 735px; top: 160px;"> </div> </div> </div> </div> in above code child elements have there left , top defined dynamically mouse click position on map image. have 4 predefined zoom levels css supplying dynamically on zoom in/out buttons.
below css
.image-viewer .image-wrapper { position: relative; width: 92vw; height: 92vh; margin: 4vh 4vw; overflow: hidden; } .image-viewer .image-outer { position: absolute; left: 0; right: 0; top: 0; bottom: 0; text-align: center; transition: .35s ease; -webkit-transition: .35s ease; } .image-viewer .image-outer .map-image { display: inline-block; vertical-align: middle; max-width: 100%; max-height: 100%; width: auto !important; height: auto !important; background-size: contain!important; background-position: center!important; background-repeat: no-repeat !important; transform: scale3d(1, 1, 1); -webkit-transform: scale3d(1, 1, 1); transition: .4s ease; -webkit-transition: .4s ease; animation: image-fade-in 0.4s ease; -webkit-animation: image-fade-in 0.4s ease; } .image-viewer .image-outer.zoom-1 { cursor: default; } .image-viewer .image-outer.zoom-2 .map-image { transform: scale3d(1.5, 1.5, 1); -webkit-transform: scale3d(1.5, 1.5, 1); } .image-viewer .image-outer.zoom-3 .map-image { transform: scale3d(2, 2, 1); -webkit-transform: scale3d(2, 2, 1); } .image-viewer .image-outer.zoom-4 .map-image { transform: scale3d(2.5, 2.5, 1); -webkit-transform: scale3d(2.5, 2.5, 1); } .image-viewer .image-outer.zoom-5 .map-image { transform: scale3d(3, 3, 1); -webkit-transform: scale3d(3, 3, 1); } .booth{ width:9px; height:9px; border-color:white; border-width:1px; border-style:solid; position:absolute; z-index:999; background-color: red; transition: .2s ease-in-out; } .booth:hover{ cursor: pointer; transform: scale(2.0); } here jsfiddle - https://jsfiddle.net/veda_in/o2qlt4q8/33/
just change this.
.image-viewer .image-outer.zoom-2 .map-image { transform: scale3d(1.5, 1.5, 1); -webkit-transform: scale3d(1.5, 1.5, 1); } to :
.image-viewer .image-outer.zoom-2 { transform: scale3d(1.5, 1.5, 1); -webkit-transform: scale3d(1.5, 1.5, 1); } the problem here when scaling map image, image scaling class zoom-2 width not scaling, container both booth element , map image.
.image-viewer .image-outer { position: absolute; left: 0; right: 0; top: 0; bottom: 0; text-align: center; transition: .35s ease; -webkit-transition: .35s ease; } so either scale zoom-2 div class or add zoom-2 class map-image , define map-image relative.
Comments
Post a Comment