0
Hello,
I was putting circles and over specific dots of an image but I would like them to reduce their size but without leaving the position I want, i tried to use % also tried to use vw but never gets stopped from the specific place of the image and depending on the measure of the monitor the circumferences get too small.
I wanted to know how best to put some responsive circles in a specific place of the image without them moving around with Brower’s resolution.
In this example I wanted the circumference to be on top of the cigarette as it is on Fullscreen but to keep the same position when reducing the screen
My goal is to make it look like the circle is part of the image but then when you click on the circle a pop-up appears
Code:
.imagensdesktop {
display: flex;
}
.imagensdesktop .img-fluid {
padding: 5px;
max-width: 100%;
height: auto;
}
#circulo-modal {
border: solid white 2px;
border-radius: 50%;
position: absolute;
z-index: 1000;
top: 0;
width: 4.5vw;
height: 4.5vw;
}
.c-1 {
margin-top: 18.5%;
margin-left: 12.5%;
}
<div class="container imagensdesktop">
<div id="img-1">
<img class="img-fluid" src="https://images.unsplash.com/photo-1616328774543-60eef730c6f3?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=622&q=80" alt="img-1" />
<div id="circulo-modal" class="c-1" type="button" data-bs-toggle="modal" data-bs-target="#exampleModalCenter1">
</div>
</div>
</div>
has tried to use measures in
%
in place ofvw
? viewport can tbm be influenced by scrolling bars– Ricardo Pontual
@Ricardopunctual already tried to use %, VW, even with some researches I found something called EW but also did not work
– David Mv
Put #img-1 {position: relative;width: max-content} and rearrange the percentages to put the circle in the right place
– hugocsl
@hugocsl and in relation to the circumference for when the image goes reducing the circle go reducing also to appear that the circle keeps the same size?
– David Mv