Как прикрепить картинку к нижнему-правому углу родительского элемента?

Question

[crescent]

Есть вот такая структура

<div class="parent">
   <img src="...."/>
</div>

Картинка должна быть прикреплена к нижнему-правому углу родительского элемента и отстаять от границы его на 10px.
Впринципе у меня такое получалось. Но при изменении размера экрана у меня все слетает.
Также необходимо чтобы размер картинки был пропорционален размеру div.parent

У кого-нить есть какие решения??

Answer 1

[devstudent]

в теории, без конкретного примера , можно было бы поставить родителю position:relative; а картинке absolute, bottom:10px; right:10px; max-width:100%; или поставить фоном с позиционированием справа внизу

Comments

[Глеб Кемарский]

Вот так получится: https://jsfiddle.net/glebkema/4L8qf2ca/

[devstudent]

Глеб Кемарский: отличное решение !

[Глеб Кемарский]

devstudent: это ваше решение :) И оно мне нравится больше, чем моё собственное. Потому что в вашем решение нет ничего лишнего, а в моём паддинг добавляет неожиданные эффекты.

[devstudent]

@glebkem позишн релатив как то меньше проблем создает , с высотой например

[crescent]

Глеб Кемарский: я кстати padding в вашем решении убрал (ибо он уже был занят) а добавил в img margin: -10px.

[Глеб Кемарский]

crescent: Спасибо за дополнение! Кстати, интересно проверить все эти варианты на взаимодействие с содеявшими блоками...

Answer 2

[Глеб Кемарский]

Вариант через относительное позиционирование: https://jsfiddle.net/glebkema/7Lpv0x3w/

.parent {
  padding: 10px;
}
img {
  position: relative;
  top: 80%; 
  left: 80%;
  height: 20%;
  width: 20%;
}

Comments

[crescent]

работает )

[Глеб Кемарский]

crescent: Я рад ) Но вариант devstudent мне тоже нравится ))

Answer 3

[Михаил Чирский]

Можно еще через Flexbox вот так к примеру:
https://jsfiddle.net/4L8qf2ca/2/