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

Ответ 1

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

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

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

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

Ответ 2

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

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

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

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

Ответ 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 (см. эта ошибка) - не то, что вам нужно слишком сильно беспокоить.

Ответ 4

Попробуйте обходное решение:

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

<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;}

Ответ 5

В css3 также есть фоновый клип. Он работает во всех основных браузерах. Параметры - это рамка, поле для заполнения и содержимое. В вашем случае, я думаю, вы захотите использовать padding-box.

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

Ответ 6

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

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

Ответ 7

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

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

Ответ 8

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

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

Ответ 9

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

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

Ответ 10

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