I'm looking for an alternative to this css code, which is working as expected on chrome, but not on firefox.

The pins are not keeping their position when the viewport size is different. You can resize (height and width) the viewport on jsfiddle on chrome to see what I expect and on firefox to see what I don't. I guess there is something between margin: auto and object-fit: contain which is not calculated the same way...

Chrome margin from devtools Firefox margin from devtools

I know that I can do it in javascript but i'd like to know if it's possible with css !

<div >
  <div >
    <div >TITLE</div>
    <div >Subtitle</div>
    <div >
      <div >
        <img src="./img.jpg" alt="">
      </div>
      <div >
        <div >?</div>
        <div >?</div>
        <div >?</div>
        <div >?</div>
      </div>
    </div>
  </div>
</div>

.site{
  position: relative;
  width: 100%;
  height: 80vh;
  display: flex;
  flex-direction: column;
  margin: 0 auto;
  max-width: 960px;
  border: 1px solid blue;
}

.wrapper{
  display: flex;
  flex-direction: column;
}

.container{
  position: relative;
  border-radius: 6px;
  margin: auto;
}

.img-wrapper{
  height: 100%;
}

.img-wrapper img{
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.pin-container{
  position: absolute;
  color: red;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.pin{
  position: absolute;
  background-color: white;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  text-align: center;
  transform: translate(-50%, -50%);
}

.pin1 {
  top: 50%;
  left: 24%;
}
.pin2 {
  top: 30%;
  left: 52%;
}
.pin3 {
  top: 87%;
  left: 79%;
}
.pin4 {
  top: 100%;
  left: 100%;
}

https://jsfiddle.net/MathieuSP/8u3gLz4q/

Thank you ! :)

CodePudding user response：

I think it's because of display: flex in the .wrapper.

The flex-box itself will always keep the content to fit inside so it will shrink your image down or scale it up.

You can use flex: 1 to keep the image from being change (you can read more about it here) and set the aspect-ratio to keep width and height of the image consistent. Just set it in the .container

 .container {
    position: relative;
    border-radius: 6px;
    margin: auto;
    flex: 1;
    aspect-ratio: 1.5;
  }

Here is the snippet, hope this can help you

* {
  margin: 0;
  overflow: hidden;
  box-sizing: border-box;
}

body{
  height: 100vh;
  width: 100vw;
  color: white;
  background-color: black;
}

.title{
  text-align: center;
  padding: 2rem 0;
  font-size: 2rem;
}

.subtitle{
  text-align: center;
  padding: 1rem 0;
  font-size: 1rem;
}

.site{
  position: relative;
  width: 100%;
  height: 80vh;
  display: flex;
  flex-direction: column;
  margin: 0 auto;
  max-width: 960px;
  border: 1px solid blue;
}

.wrapper{
  display: flex;
  flex-direction: column;
}

.container{
  position: relative;
  border-radius: 6px;
  margin: auto;
    flex: 1;
    aspect-ratio: 1.5;
}

.img-wrapper{
  height: 100%;
}

.img-wrapper img{
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.pin-container{
  position: absolute;
  color: red;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.pin{
  position: absolute;
  background-color: white;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  text-align: center;
  transform: translate(-50%, -50%);
}

.pin1 {
  top: 50%;
  left: 24%;
}
.pin2 {
  top: 30%;
  left: 52%;
}
.pin3 {
  top: 87%;
  left: 79%;
}
.pin4 {
  top: 100%;
  left: 100%;
}

<div >
    <div >
        <div >TITLE</div>
        <div >Subtitle</div>
        <div >
            <div >
                <img src="https://images.pexels.com/photos/1534057/pexels-photo-1534057.jpeg" alt="">

                <div >
                    <div >?</div>
                    <div >?</div>
                    <div >?</div>
                    <div >?</div>
                </div>
            </div>

        </div>
    </div>
</div>

CodePudding user response：

They are moving because their container size changes bigger than the picture. For such positioning, always put the image and absolute elements in one container with fit-content width and height. and of course relative position If you do so, they will stay in the same spot.

* {
    margin: 0;
    overflow: hidden;
    box-sizing: border-box;
  }
  
  body{
    height: 100vh;
    width: 100vw;
    color: white;
    background-color: black;
  }
  
  .title{
    text-align: center;
    padding: 2rem 0;
    font-size: 2rem;
  }
  
  .subtitle{
    text-align: center;
    padding: 1rem 0;
    font-size: 1rem;
  }
  
  .site{
    position: relative;
    width: 100%;
    height: 80vh;
    display: flex;
    flex-direction: column;
    margin: 0 auto;
    max-width: 960px;
    border: 1px solid blue;
  }
  
  .wrapper{
    display: flex;
    flex-direction: column;
  }
  
  .container{
    position: relative;
    border-radius: 6px;
    margin: auto;
  }
  
  .img-wrapper{
    height: 100%;
  }
  
  .img-wrapper img{
    width: 100%;
    height: 100%;
    object-fit: contain;
  }
  
  .pin-container{
    position: absolute;
    color: red;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 1px solid red;
  }

  .pos-container {
    border: 3px solid orange;
    position: relative;
    width: fit-content;
    height: fit-content;
  }
  
  .pin{
    position: absolute;
    background-color: white;
    color: red;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    text-align: center;
    transform: translate(-50%, -50%);
  }
  
  .pin1 {
    top: 50%;
    left: 24%;
  }
  .pin2 {
    top: 30%;
    left: 52%;
  }
  .pin3 {
    top: 87%;
    left: 79%;
  }
  .pin4 {
    top: 100%;
    left: 100%;
  }

<body>
    <div >
      <div >
        <div >TITLE</div>
        <div >Subtitle</div>
        <div >
          <div >
            <div >
              <img src="https://images.pexels.com/photos/1534057/pexels-photo-1534057.jpeg" alt="">
                <div >?</div>
                <div >?</div>
                <div >?</div>
                <div >?</div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </body>