0
305
Visualizações¿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 Respostas
Responde à pergunta0
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
Relatório
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
Relatório
Responde à pergunta