Как отловить размер изображения и позиционировать на нем объекты?

Question

[deniskins23]

Доброго времени суток.
Кто может подсказать вот какую штуку. На странице есть изображение, которое увеличивается в зависимости от размера экрана. И на нем есть объекты
Вопрос в том. как отпозиционировать эти объекты, чтобы они не слетали когда изображение увеличивается?
Вот тут это реализовано(на последнем экране перед футером) https://straticainternational.com/products/broadwa... ,но не могу докопаться как, потому что идет просчет через js как я понимаю.
Кто может подсказать как сделать?

Answer 1

[Ankhena]

В процентах относительно общей обертки. Без js.

Comments

[deniskins23]

Окей, спасибо. Попробую

[Ankhena]

deniskins23,

Вот на примере одной точки
https://jsfiddle.net/xuh1wac8/
размер специально чуть меньше для наглядности, сами посчитайте нужный

[RAX7]

deniskins23,

[deniskins23]

Ankhena, Огромное спасибо!!!
Думаю это и есть решение..
Просто на том примере, что скидывал, эти кружки , если открыть консоль, то видно что они инлайновыми стилями через js смещаются и это сильно сбило, так и не понял тогда зачем

[deniskins23]

RAX7, спасибо!

[deniskins23]

Ankhena, а есть разница?
Я вот выше уже написал, но продублирую - Просто на том примере, что скидывал, эти кружки , если открыть консоль, то видно что они инлайновыми стилями через js смещаются и это сильно сбило, так и не понял тогда зачем

[RAX7]

Ankhena, да, спасибо) поправил.

[RAX7]

deniskins23, там всплывающие подписи (tooltip) через js позиционируются, чтобы они не вылезли за пределы экрана.

spoiler

[Ankhena]

deniskins23, js для тултипов. Сами кружки не вижу смысла позиционировать на js.

[deniskins23]

Ankhena, RAX7, А ведь мне нужно будет там тоже тултипы делать..-)Вот тут похоже и раскрылся весь вопрос.-)

[Ankhena]

deniskins23, если мало точек и простая адаптация, то можно классами, снова без js

[deniskins23]

Ankhena, Да, точек максимум 3 на каждом изображении. А как это будет классами?Просто модификаторы вешать на них и просчитывать? По идее я думаю что справлюсь уже скорее всего.
Спасибо за дельные советы!-)
С праздником всех!

[Ankhena]

deniskins23, да, именно так

[Антон Вебсайтовский]

Ankhena, Привет, сделал подобный пример по твоему совету, текст движется все ок, но я добавил там еще анимацию, которая идет отдельной картинкой и подводится через left, top к точке на картинке, как сделать чтобы и она двигалась за точкой. вот пример https://jsfiddle.net/rocy7xg5/

[Антон Вебсайтовский]

Антон Вебсайтовский, а точнее, чтобы она тож уменьшалась. так-то она сдвигается по идеи но не уменьшается как основная картинка.

[Антон Вебсайтовский]

RAX7, Хороший вариант, но я чуть по другому вроде сделал, как мне решить вопрос с адаптацией точки, чтобы она двигалась за точкой анимационная точка и тож уменьшалась как основная картинка и точка которая в картинке, вот пример рабочий: https://jsfiddle.net/rocy7xg5/

[Ankhena]

Антон Вебсайтовский, Ну так тоже самое всё.
https://jsfiddle.net/705xjde6/ проценты посчитайте только точнее.

[Антон Вебсайтовский]

Ankhena, о, работает, спасибо большое, а как чтобы еще и уменьшалась эта аним картинка.

[Ankhena]

Антон Вебсайтовский, размеры в %, ей и её родительскому div'у

[Антон Вебсайтовский]

Ankhena, я правильно понял

.pi {
position: absolute;
left: 17.4%;
top: 13.7%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
width: 139px;
height: 141px;
}

width: 139px;
height: 141px;

надо width: 100%; и height: auto;

а тут тогда что
.ia{
position: absolute;
-webkit-animation: pulsate .5s infinite alternate;
animation: pulsate .5s infinite alternate;
}

[Антон Вебсайтовский]

Антон Вебсайтовский, не так не работает.

[Антон Вебсайтовский]

Ankhena, может не правильно вопрос задал, я про адаптивность, щас задний фон картинка дорога с точками уменьшаться если сжимаем экран, все верно, а как еще эту анимационную точку сделать чтобы и она уменьшалась.

[Ankhena]

Антон Вебсайтовский, конечно не работает, 139 px это не 100% от ширины родителя. Если прикинуть на глаз, то где-то в районе 10-13% должно быть. Посчитайте на калькуляторе или подгоните через инструменты разработчика.
Высоту через пропорции https://jsfiddle.net/Ankhena/cLhxv7eq/

Картинке не забудьте max-width 100% задать

[Антон Вебсайтовский]

Ankhena, а понял вас, то есть width: 139px; height: 141px; заменяю px на % и подгоняю циферки. это у родителя, а как быть с классом который для картинки?

.ia{
position: absolute;
-webkit-animation: pulsate .5s infinite alternate;
animation: pulsate .5s infinite alternate;
}

[Ankhena]

Антон Вебсайтовский,

как быть с классом который для картинки?

Картинке не забудьте max-width 100% задать

Мне кажется, этого достаточно.

Если нет, то в песочницу.

[Антон Вебсайтовский]

Ankhena, а вот и результат. https://jsfiddle.net/naqu3fdo/

[Ankhena]

Антон Вебсайтовский, почти круть, чуть чуть подвигать еще

Я бы вообще убрала кругляхи из фона. Наложила бы их абсолютом, а у активного запускала бы пульсацию. Тогда не надо будет играть в подгонку сотых и тысячных долей процентов.

[Антон Вебсайтовский]

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

[Ankhena]

Антон Вебсайтовский, ну так я же сказала высоту в пропорциях от ширины задавать, а не от родительской

[Антон Вебсайтовский]

Ankhena, не совсем понимаю чет запутался.

[Антон Вебсайтовский]

Ankhena, подровнял исходник картинки сделал width: 140px; height: 140px; чтобы ровно квадрат был.

[Антон Вебсайтовский]

Как лучше ровнять, отключаем анимаху и подбираем процент width: %; height: %; у родителя, пока не ляжет в тютельку все миллиметры, я так смог ровно поставить точку на точку которая на картинке, но все равно есть но, когда сжимаешь экран браузера, сдвиги есть, идеально не реально сделать?

пиксели
width: 140px;
height: 140px;

в процентах
width: 11.9%;
height: 11.9%;

все ровно легло, вроде )) точка на точку.

[Ankhena]

Антон Вебсайтовский,

Как лучше ровнять, отключаем анимаху и подбираем процент width: %; height: %

Да, я примерно так делала. С работающей анимашкой меня просто укачивает )))
Но опять: height не надо ставить в зависимость от размера большой картинки, высота зависит от размера маленькой картинки.

когда сжимаешь экран браузера, сдвиги есть, идеально не реально сделать

Думаю, что дальше идет округление браузера. Поэтому и предлагала убрать врисованные кругляши.

[Антон Вебсайтовский]

Ankhena, Ну я так и сделал и все стало ок ! решил проблему с мелкими сдвигами при адаптации.

[Антон Вебсайтовский]

Ankhena, Привет, столкнулся с другим примером, там картинка не большая, вот пример.
https://jsfiddle.net/qp4vrcza/1/

Картинка растянулась, что с этим делать-то?
Как нормально сделать, чтобы я мог точку нормально поставить и все адаптировалось нормально.

Перебирал разные варианты и не вышло, вариант который выше скидывал RAX7 пробовал, и тож самое.

[Ankhena]

Антон Вебсайтовский, логика вроде элементарная: если картинка вообще не должна растягиваться, значит родитель должен быть фиксированным. Если картинка может растягиваться только до определенных размеров, то размеры родителя ограничены.

[Антон Вебсайтовский]

Ankhena, растягивается все и блок и картинка должна быть, но по примеру который я скинул, видно что там чет она растянулась через чур. все адаптивное должно быть.

[Ankhena]

Антон Вебсайтовский, Оригинальная ширина картинки 206px, вы разрешаете ей тянуться до 1200. Это почти в 5 раз.

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

[Антон Вебсайтовский]

Ankhena, Так я выложил пример и написал и спросил как сделать то что я хочу.
https://jsfiddle.net/qp4vrcza/1/

[Ankhena]

Антон Вебсайтовский, Продублируйте, пожалуйста, в следующий ответ, скрин/макет того как вы хотите, чтобы выглядело на разных разрешениях. Я его не вижу.

[Антон Вебсайтовский]

Ankhena, вот пример, https://jsfiddle.net/qp4vrcza/1/, картинка растянулась больше чем она есть, надо чтобы она не растягивалась больше чем она есть.

Пытался сделать, но не вышло, чтобы все четко адаптировалось.

[Ankhena]

Антон Вебсайтовский, у картинки ширина 206px, значит нужно ограничить ширину блока до 206px. С высотой аналогично.

[Антон Вебсайтовский]

Ankhena, Блок адаптивный, в нем картинка. я описал выше что я хочу сделать, если вы не понимаете, зачем писать, а то столько спама вышло не по теме.

.cnt {
  max-width: 1200px;
  min-width: 280px;
  margin: 0 auto;
  padding: 0 50px 0 50px;
  background: #111016;
}

[Ankhena]

Антон Вебсайтовский, Антон, я несколько раз просила нарисовать как всё должно выглядеть на 320-768-960-1200 (свои вьюпорты подставьте). Вы же талдычите одно и тоже, что хочу растянуть, но не растянуть.

У картинки ширина 206 точек. У блока максимальная ширина 1200.
Дальше вы хотите, чтобы она была адаптивной, т.е. занимала ширину блока (или как?), но не растягивалась? Это бред, геометрия не позволит.

Вы можете ее просто центрировать, остальное заполнить фоном, тогда она не будет растягиваться. Поскольку минимальная ширина блока 280px, а картинка меньше этой минимальной ширины, то проблем не будет.
Типа так https://jsfiddle.net/5bcks081/

[Антон Вебсайтовский]

Ankhena, )))))))), да я так делал, а точки, которые текста, идут от точек слева на право. вот по вашему примеру, непонятно что вышло, текста на точках они сверху, а должны быть сбоку и если картинка не адаптивная, то все не влезет, вот в чем проблема. да и сама картинка не по центру должна быть, а слева.
Есть еще проблема, сам текст, 3 строки ! а надо чтобы он был вытянут, каждая строка, а оно вытянулось по max-width: 206px;, хотя вроде текст поверх картинки.

Можно сделать тексту width: 300px;, тогда он вытянут как надо, вот пример.
https://jsfiddle.net/kw7fesp3/

Вот посмотрите и поймете, почему нужна адаптация картинки и чтобы текст шел за точкой, если сжать до 280px экран, то все не влезает. По этому я пытался сделать чтобы картинка сжималась.

[Ankhena]

Антон Вебсайтовский, ок, давайте упростим.
Поставьте блоку cnt минимально возможную ширину, пока фиксированную. Я так понимаю, что это 280px.
И сверстайте всё как для этой фиксированной ширины.
Поставьте размер и положение тексту, всё просто, можно даже без % в позиционировании, адаптива и т.д.
Надо для красоты уменьшить картинку - уменьшайте, надо изменить размер шрифта - изменяйте.
К адаптиву вернемся позже.

Красная рамка это 280 https://jsfiddle.net/1darqptb/

Например, так: https://jsfiddle.net/1darqptb/1/
Я уменьшила шрифт и картинку.
Наверное, имеет смысл еще уменьшить паддинги у cnt.
Может быть, только паддинги, а картинку оставить как есть.
Я не знаю, что в голове у дизайнера.

Короче просто сверстайте для минимальной ширины, так чтобы вам понравилось, как выглядит.

[Антон Вебсайтовский]

https://jsfiddle.net/1darqptb/1/ ну да, все верно, зачем опять что-то делать, если есть варианты уже адаптивные, ну и ваш вариант, а смысл был его делать ), там же ничего не адаптивно ) и надо чтобы не по центру было, а по левую сторону контейнера. Падинги можно не трогать, об них речи не было.

Все, вот то что надо, я там чуть поправил, https://jsfiddle.net/4mcyeb6f/
Все на самом деле проще чем я думал, я мутил чет подобное но не так выходило.

Спасибо с подсказками.

[Ankhena]

Антон Вебсайтовский,

Падинги можно не трогать, об них речи не было.

Имеет смысл потрогать, потому что с ними ширина 380 выходит, а мобилки 320-360 и значит будет гориз прокрутка.

Answer 2

[Stalker_RED]

Позиционировать в процентах или при помощи js

Comments

[deniskins23]

а как при помощи js ?вопрос и был в этом впринципе..

[deniskins23]

Да и по процентам, вопрос в том, что относительно чего позиционировать? круги эти красные относительно изображения или и изображение и круги нужно позиционировать относительно обертки их общей? Да и вопрос еще вот в чем, а если уменьшится высота, то изображение то еще как-то подстроится, а вот объекты на нем(красные круги), по идее как мне кажется сползут..

[Stalker_RED]

deniskins23, эм... слушать событие resize, пересчитывать размер

[deniskins23]

понял. спасибо. попробую.