0
304
Views¿Cómo adjuntar una imagen a otra imagen?
Quiero hacer un dispositivo de sincronización, mide el cambio de fase entre fases. Es un dispositivo de medición, que tiene un puntero como un reloj. 
Consta de dos imágenes, un marco y una flecha, que gira. pero cuando trato de cambiar el tamaño de la ventana tengo lo siguiente: 
Mi html:
<div> <div> <div className={classes.sync_point}> . </div> <img src={arpng} ref={point} alt="arrow" className={classes.arrow} /> <img src={syncFrame} alt="syncframe" className={classes.syncFrame} /> </div> <div className={classes.btn}> <Button variant='contained' onClick={calculateResult}>SYNCHRONISE</Button> </div> <div> <h1>{word}</h1> </div> </div>mi CSS:
.syncFrame{ margin-top: 40px; width: 50%; height: 50%; position: absolute; left: 20vh; z-index: 1; } .arrow{ margin-top: 40px; width: 50%; height: 50%; position: relative; z-index: 2; }¿Cómo puedo enlazar esas imágenes para que cuando cambie el tamaño de la ventana o cambie mi dispositivo, cambie de tamaño proporcionalmente?
·
Santiago Trujillo
2 answers
Answer question0
Puede usar una position:relative y establecer la segunda imagen con position:absolute . Puede configurar el puntero como lo necesite con top:0 , left:50% , bottom:0 y margin:auto
.container{ background-color:blue; width: 50%; position: relative; } .clock{ width:100%; } .pointer{ position:absolute; top: 0; left: 50%; bottom: 0; margin: auto; width: 40%; transform: rotate(-180deg); transition-duration: 1s; transform-origin: left; } .container:hover .pointer{ transform: rotate(-45deg); } <div class="container"> <img class="clock" src="https://upload.wikimedia.org/wikipedia/commons/thumb/a/a0/Circle_-_black_simple.svg/500px-Circle_-_black_simple.svg.png" alt=""> <img class="pointer" src="https://upload.wikimedia.org/wikipedia/commons/thumb/8/8d/U%2B2192.svg/250px-U%2B2192.svg.png" alt=""> </div>
·
Santiago Trujillo
Report
0
<div className="parent"> <div className={classes.sync_point}> . </div> <img src={arpng} ref={point} alt="arrow" className={classes.arrow} /> <img src={syncFrame} alt="syncframe" className={classes.syncFrame} /> </div> .parent{ height: ....; width: ....; border: 1px solid black; position: relative; } img, .sync_point { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 100%; max-height: 100%; }
·
Santiago Trujillo
Report
Answer question