Как предотвратить переполнение изображения скругленным углом?

Question

Если я использую этот код, изображение не обрезается закругленными углами div (в результате квадратные углы изображения покрывают округленные div):

<div style="border-radius: 1em; -moz-border-radius: 1em; -webkit-border-radius: 1em; overflow:hidden;">
    <img src="big-image.jpg" />
</div>

Кто-нибудь знает, как получить округленный угол деления, чтобы предотвратить переполнение дочернего изображения?

Answer 1

Мои последние версии Chrome, Firefox и Safari обрезают изображение по границе радиуса контейнера (как и предполагалось).

http://jsfiddle.net/RQYnA/12/embedded/result/

В Firefox 15 я вижу обрезанное изображение, когда контейнер имеет {overflow: hidden}. (Кажется, в Gecko 2.0 добавлено отсечение дочернего контента .

) *1009*

В Chrome 23 и Safari 5 я вижу обрезанное изображение только , когда контейнер имеет {position: static; overflow: hidden}, а изображение имеет {position: static}.

Answer 2

Это может или не может работать в вашей ситуации, но подумайте над тем, чтобы сделать изображение фоном CSS. В FF3 следующее прекрасно работает:

<div style="
  background-image:   url(big-image.jpg);
  border-radius:      1em;
  height:             100px;
  -moz-border-radius: 1em;
  width:              100px;"
></div>

Я не уверен, что есть другой обходной путь & mdash; если вы примените рамку к самому изображению (скажем, 1em глубина), вы получите ту же проблему с квадратными углами.

Редактировать: хотя в случае "добавления границы к изображению" вставка изображения правильная, просто изображение не совпадает с элементом div. Чтобы проверить результаты, добавьте style="border:1em solid black;border-radius:1em;-moz-border-radius:1em;" к тегу img (с width и height, установленными соответствующим образом, если необходимо).

Answer 3

Даже если overflow установлено на hidden, border-radius не обрезает его содержимое. Это по замыслу.

Одним из решений было бы установить border-radius на изображении, а также на его контейнер.

<div style="border-radius: 16px; ...">
    <img src="big-image.jpg" style="border-radius: 16px; ..." />
</div>

Другим способом было бы установить изображение в качестве фона контейнера, используя background-image; но есть проблемы с этим методом в Firefox до версии 3 (см. эта ошибка ) - не то, чтобы это беспокоило вас слишком сильно.

Answer 4

В css3 теперь также есть background-clip. Работает во всех основных браузерах. Возможные варианты: рамка-рамка, поле-отступ и поле-содержимое. В вашем случае, я думаю, вы захотите использовать padding-box.

-webkit-background-clip: padding-box;
-moz-background-clip:    padding; 
background-clip:         padding-box;

Answer 5

Попробуйте этот обходной путь:

1. Изображение в теге img присутствует, и вы задаете ширину и высоту.
2. Затем скройте его с помощью visibility:hidden. Ширина и высота остаются неизменными.
3. После этого вы установите тот же источник, что и фоновое изображение, и оно будет вырезано.

<a class="thumb" href="#" style="background-image: url('./img/pic1.jpg');" title="Picture">
  <img border="0" src="./img/pic1.jpg" alt="Pic" height="100" width="150" />
</a>

#page .thumb {
background-repeat: no-repeat;
background-position: left top;
border: 3px #e5dacf solid;
display: block;
float: left;}

#page .thumb img {
display: block;
visibility: hidden;}

Answer 6

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

<div style='border-radius:5px;border:thin solid 1px;'>
   <img style='border-radius:4px' />
</div>

Answer 7

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

Я на 90% уверен, что видел исправление для этого, я обновлю этот пост, когда сделаю: D

Answer 8

Простой border-radius тег img отлично работает в текущих версиях Safari 5, Chrome 16, Firefox 9:

<div>
    <img src="big-image.jpg" style="border-radius: 1em;" />
</div>

Answer 9

Вам необходимо указать точную ширину и высоту с переполнением: скрыто, если вы хотите, чтобы ваш div обрезал ваше изображение

Answer 10

Если вы сделаете изображение фоновым изображением, а не содержимым, изображение не обрезает закругленные углы (по крайней мере, в FF3).

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