HTML, CSS - изображение внутри изображения, как это сделать?

Question

У меня есть этот фрагмент HTML-кода:

<div>
  <div>
    <image src="image-inside-pic-png.png" alt="">
  </div>
  <image src="pic.png" alt="" />
</div>

pic.png (300x300 px) является основным изображением.Я хотел бы поместить image-inside-pic-png.png (20x20 px) внутри него.Когда я применяю position: absolute; к маленькому изображению, это работает только на мгновение.Если я изменю размер одного из них, он больше не будет работать.

Поэтому мой вопрос: как я всегда могу перемещать маленькое изображение на большом изображении, и это маленькое изображение всегда будет 15px сверху и 30px от правого поля большого изображения?

Спасибо за помощь

Answer 1

Без изменения разметки это может быть достигнуто, например, используя display:inline-block для самого внешнего элемента div (чтобы он не расширялся на 100% доступной ширины) и положение relative + absolute для самого внешнего элемента div и миниатюры

см. Эту скрипку: http://jsfiddle.net/cRqhT/3/
границы и размер изображения определены для простоты

Answer 2

Я думаю, что это должно работать:

HTML:

<div>
  <img src="image-inside-pic-png.png" alt="" class="inner-image"/>
  <img src="pic.png" alt="" />
</div>

CSS:

div {
  position: relative;
}

.inner-image {
  position: absolute;
  top: 15px;
  right: 30px;
}

В любом случае, убедитесь, что вам нужно сделать это с HTML.Может быть, лучше просто отредактировать изображение с помощью Photoshop или Gimp.Или, может быть, одно изображение только для стилизации, тогда вам следует использовать CSS.

Answer 3

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