@IvanGrishov
Начинающий Frontend разработчик

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

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

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

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

https://jsfiddle.net/IvanGrishov/97gsq4px/
  • Вопрос задан
  • 163 просмотра
Решения вопроса 1
@popov654
Специалист в области веб-технологий
Я не подскажу точное решение, но как я понимаю, ваша проблема из-за того, что у вас картинка срезается благодаря object-fit (и через background тоже бы срезалась), и координаты точек в процентах считаются не от картинки, а от элемента. Например, top: 20% превратится в 30% относительно верха картинки, если 10% её высоты осталось за краем.

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

Или если вам не критично то, что у вас срезается часть схемы (хотя должно быть критично), можете оставить cover как сейчас (либо background-size: cover), разместить в центре контейнера невидимый блок размером в 1px, точки вкладывать в него и задавать им отрицательные координаты, привязав всё к центру как в школе на графиках. И поставить overflow: hidden на контейнере, чтобы точки тоже скрывались при вылете за края.
Ответ написан
Пригласить эксперта
Ответы на вопрос 1
@karmyskove
Для начала, можно сократить код, div с классом "dots-item" можно оставить один, две другие точки нарисовать с помощью псевдо элементов, код будет более компактным. А про адаптив точек, тут могу сделать предположение, нужно использовать позиционирование, картинке задай postition: relative, а для div position: absolute. Точки уже не будут уезжать за границы картинки, а позиционирование точек задай в процентах, скажем left: 20%, top: 15%; значения будут зависеть от картинки, если где-то будет сильно съезжать, использую media, и вручную не много подправь. Возможно есть и более элегантное решение поставленной задачи, но моих скромных навыков хватает только на такое решение ;D
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы