Абсолютно позиционированное изображение в оболочке радиуса границы

Question

У меня есть обертка с радиусом границы. Внутри обертки у меня есть абсолютно позиционированное изображение в верхнем правом углу. Моя проблема в том, что изображение не обрезается / скрывается под оболочкой с радиусом границы. Я пробовал переполнение: скрыто на оболочке, но это не работает. Смотрите изображение ниже.

Answer 1

Тег изображения не зависит от радиуса границы.

Лучше всего использовать изображение в качестве фона, например:

<div id="someimage" style="background:url('image.jpg');border-radius: 5px; height: 200px; width: 500px;"></div>

Элемент (в приведенном выше примере div) должен содержать размер фактического изображения)используйте CSS3, изображение не может быть изменено как <img> tag

Answer 2

Вы можете использовать отдельный абсолютно позиционированный <div> для границы, чтобы вы могли разместить границу над вашим абсолютно позиционированным изображением.Например:

<div id="wrapper">
    <div id="inner">
        <img id="i" width="75" height="75" src="http://placekitten.com/75/75">
    </div>
    <div id="border"></div>
</div>

И некоторые CSS (только свойства радиуса границы WebKit, остальные оставлены в качестве упражнения для читателя):

#wrapper {
    position: relative;
}

#inner {
    margin: 2px; /* Make room for the border */
    width: 200px;
    height: 200px;
    position: relative;
}

#border {
    -webkit-border-radius: 5px;
    border: 2px solid black;
    width: 200px;
    height: 200px;
    position: absolute;
    top: 0;
    left: 0;
}

#i {
    position: absolute;
    top: 0;
    right: 0;
}

И обычный пример: http://jsfiddle.net/ambiguous/6e622/

<div id="border"> - это, конечно, хак (и я чувствую себя немного грязно из-за этого), но, возможно, это сработает для вас.