Как сделать, чтобы красные круги оставались на одних и тех же местах при изменении ширины экрана?

Question

[Иван Гришов]

Добрый день. Есть блок с картинкой и красные точки.
Мне нужно, чтобы точки оставались на одних и тех же местах при изменении ширины экрана.

Высота блока на 768px должна быть 500px, а на компе 854px. Сейчас на десктопе вроде не смещаются круги, а на адаптиве совсем плохо.

Подскажите, как правильно верстать такие блоки? Расположение точек задается в html через style в процентах. Спасибо за ответ.

https://jsfiddle.net/IvanGrishov/97gsq4px/

Answer 1

[Александр Попов]

Я не подскажу точное решение, но как я понимаю, ваша проблема из-за того, что у вас картинка срезается благодаря object-fit (и через background тоже бы срезалась), и координаты точек в процентах считаются не от картинки, а от элемента. Например, top: 20% превратится в 30% относительно верха картинки, если 10% её высоты осталось за краем.

Мне кажется, вам нужно поместить точки в контейнер, зафиксировать ему либо ширину в 100% (смартфоны), либо высоту на фиксированной величине (десктоп), а второй параметр считать или через aspect свойства, или через JS для поддержки любых браузеров. При этом точки размещать в этом контейнере, а картинку сделать его фоном с background: contain для десктопа, когда контейнер шире изображения, а для мобильных просто задать явно ширину background в пикселях больше ширины экрана, а высоту в auto для сохранения пропорций, чтобы края изображения по горизонтали срезались. Либо делайте для смартфонов контейнер со скроллом, что практичнее для пользователя.

Или если вам не критично то, что у вас срезается часть схемы (хотя должно быть критично), можете оставить cover как сейчас (либо background-size: cover), разместить в центре контейнера невидимый блок размером в 1px, точки вкладывать в него и задавать им отрицательные координаты, привязав всё к центру как в школе на графиках. И поставить overflow: hidden на контейнере, чтобы точки тоже скрывались при вылете за края.

Comments

[Иван Гришов]

Спасибо за развернутый ответ. Разместить в центре невидимый блок - гениальное решение, мне подошло. И с background-size: cover все ок работает, и можно жестко задавать высоту всего блока на разных разрешениях.

Answer 2

[karmyskove]

Для начала, можно сократить код, div с классом "dots-item" можно оставить один, две другие точки нарисовать с помощью псевдо элементов, код будет более компактным. А про адаптив точек, тут могу сделать предположение, нужно использовать позиционирование, картинке задай postition: relative, а для div position: absolute. Точки уже не будут уезжать за границы картинки, а позиционирование точек задай в процентах, скажем left: 20%, top: 15%; значения будут зависеть от картинки, если где-то будет сильно съезжать, использую media, и вручную не много подправь. Возможно есть и более элегантное решение поставленной задачи, но моих скромных навыков хватает только на такое решение ;D

Comments

[Иван Гришов]

Дак у меня сейчас примерно так, как вы описали, точки разъезжаются при таком способе. В проекте точек будет больше, их нельзя делать через псевдоэлементы.