Creo que debe haber una opción usando sólo CSS... pero no se me ha ocurrido de momento. Una opción que tienes usando JavaScript sería con un MutationObserver
para detectar el cambio de tamaño en el div
contenedor y calcular la posición vertical de los círculos. (También se podría usar ResizeObserver
pero, al momento de escribir esta respuesta, apenas tiene soporte, por lo que mejor optar por el más genérico MutationObserver
).
La idea es tan sencilla como se indica arriba: detectar cambios de tamaño, calcular la nueva posición vertical (para lo que hará falta saber el tamaño de la imagen), y aplicársela al contenedor de los círculos. En este caso particular, la imagen de fondo tiene un ancho de 640px, un alto de 534px, y la posición de los círculos está alrededor del 50% (o 267px).
Nota: Inicialmente tenía un ejemplo más específico (poniendo directamente ancho=640 y alto=534), pero para que se vea mejor de dónde viene cada valor y no usar "números mágicos", lo he cambiado para cargar la imagen y calcular los valores iniciales a partir del tamaño de la imagen... pero si sabes los valores, te puedes ahorrar esa parte si quieres.
Aquí lo puedes ver funcionando (los cambios son principalmente JS, manteniendo el HTML igual al inicial, y el CSS apenas tiene cambios mínimos):
// cargamos la imagen de fondo, esto no es necesario realmente, es para hacerlo más genérico y no usar números mágicos (se ve mejor lo que estoy haciendo si indico que es el ancho de la imagen, en lugar de que es 640).
let img = new Image();
img.src = "https://preview.ibb.co/nMfMkq/fondo.png";
img.onload = function() {
// calculamos su ancho, alto y la posición de la barra horizontal
let ancho = img.width;
let alto = img.height;
let altoBarra = img.height / 2; // la barra comienza alrededor de la mitad de la imagen
// crea un observador e indica la función a ejecutar
let observer = new MutationObserver(function() {
let contenedor = document.querySelector("#contenedor");
let circulos = document.querySelector("#circulos");
let ratio = ancho / alto;
// si ratio es mayor, la parte superior e inferior de la imagen se pierde
if (contenedor.offsetWidth > contenedor.offsetHeight * ratio) {
// calcula cuál sería la nueva posición de los círculos
circulos.style.top = (contenedor.offsetWidth * altoBarra / ancho) + "px";
// si el ratio es menor, la parte izquierda y derecha de la imagen se pierde
} else {
// pero no afecta a los círculos que siguen estando al 50%
circulos.style.top = "50%";
}
});
// comienza la observación del elemento
observer.observe(document.querySelector("#contenedor"), {attributes: true});
}
#contenedor {
width: 320px;
height: 267px;
background: url("https://preview.ibb.co/nMfMkq/fondo.png") no-repeat top center;
background-size: cover;
border: solid 2px #333;
resize: both;
overflow: auto;
}
#circulos {
display: flex;
justify-content: space-between;
position: relative;
top: 133px;
}
#circulos>div {
background-color: #d45500;
border-radius: 50%;
width: 60px;
height: 60px;
}
<div id="contenedor">
<div id="circulos">
<div></div>
<div></div>
<div></div>
</div>
</div>
Ahora que la posición vertical de los círculos es correcta, puedes ampliar el ejemplo para que no sólo se reposicionen, sino que además cambien de tamaño para que siempre tenga la misma proporción.