responsive circumferences in specific places

Asked

Viewed 38 times

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>

html css
  • 1

    has tried to use measures in % in place of vw? viewport can tbm be influenced by scrolling bars

  • @Ricardopunctual already tried to use %, VW, even with some researches I found something called EW but also did not work

  • 1

    Put #img-1 {position: relative;width: max-content} and rearrange the percentages to put the circle in the right place

  • @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?

1 answer

1


Solution:

First, put #img-1 with position:relative or the percentages will apply with respect to the first element that does not have position:static. In this snippet is the html, so only on "fullscreen" that the circle fits.

Your image originally measures 622x967 pixels.

Positioning:

The positioning of the div is given by its upper left corner.

Square the original image starting at 237,351 to 314,428 (to contain the circle). We have the upper left corner of this square will be at 100x237/622 = approximately 38% of the left margin and 100x351/967 = approximately 36% of the upper margin.

Size:

This drawn square has dimensions 77x77 pixels. Making the proportions we have the circle div is 12% of the image width and 8% of the height.

Your CSS would look like this:

.imagensdesktop {
display: flex;
}

.imagensdesktop .img-fluid {
    padding: 5px;
    max-width: 100%;
    height: auto;
}

#img-1 {position:relative}

#circulo-modal {
    border: solid white 2px;
    border-radius: 50%;
    position: absolute;
    z-index: 1000;
}

.c-1 {
    top: 36%;
    left: 38%;
    width: 12%;
    height: 8%;
}
<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>

  • It worked perfectly! Thank you for your help and explanation!

Browser other questions tagged html css

You are not signed in. Login or sign up in order to post.